Implement <svelte:target> special component. Closes #1321.

[hperrin]

Adding the <svelte:target> special component, which allows convenient declarative event listeners and attributes on the component's target element.

See #1321 for the initial proposal.

This allows components to be more useful as functionality adders to existing elements. For example:

<svelte:target href="/app/{ section }/{ entity }" />

Can be the entire Link component. This plays well with other components that can add additional functionality. It could be used like so:

const link = new Link({
  target: domAnchorElement,
  data: {
    section: domAnchorElement.dataset.section,
    entity: domAnchorElement.dataset.entity
  }
});

Or even like this:

<a use:link="{section: 'kingdoms', entity: 'chocolate'}">The chocolate kingdom!</a>

<script>
  import Link from './Link.html';
	
  export default {
    actions: {
      link(node, data) {
        const link = new Link({target: node, data});
        return {
          destroy() {
            link.destroy();
          }
        };
      }
    }
  };
</script>

This would involve a lot of manual DOM manipulation of component.options.target without this PR.

[codecov-io]

Codecov Report

❗ No coverage uploaded for pull request base (master@e0fe313). Click here to learn what that means.
The diff coverage is 85.71%.

@@           Coverage Diff            @@
##             master   #1355   +/-   ##
========================================
  Coverage          ?   91.5%           
========================================
  Files             ?     127           
  Lines             ?    4472           
  Branches          ?    1386           
========================================
  Hits              ?    4092           
  Misses            ?     154           
  Partials          ?     226

Impacted Files	Coverage Δ
src/validate/html/validateElement.ts	91.22% <100%> (ø)
src/generators/nodes/Element.ts	94.15% <81.81%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e0fe313...e87836d. Read the comment docs.

[Rich-Harris]

Thanks — closing this as there's no route to merging it into the current codebase. I expressed some reservations about the idea in Discord when it first came up, and I don't think I'm convinced that a component should be able to access its target element. It breaks encapsulation, and feels like it would create a lot of edge cases.