HTML as the single source of truth?

@underscorefunk @t3dotgg @JacobMGEvans @buildWithLit

Tip💡: Many code editors will highlight HTML/CSS in tagged template strings if the function is named `html`. If you're not using a library that defines an `html` function you can easily create your own with the builtin raw string function: const html = String.raw;

Events triggered inside the Shadow DOM are 'retargeted' so that they appear to come from the custom element - i.e. the event target is set to be the custom element itself. You can get the true path the event travelled using `composedPath()`: gist.github.com/lamplightdev…

Your Web Component can emit DOM events just like the built in elements - use the 'dispatchEvent' method coupled with a 'CustomEvent' carrying any payload you choose: gist.github.com/lamplightdev…

Custom elements can be used to 'retro fit' existing sites simply by including some extra markup: gist.github.com/lamplightdev…

You can't define a custom element more than once - if there's a chance of this happening you will need to guard against it: gist.github.com/lamplightdev…

The part attribute and ::part CSS pseudo-element expose parts of your Shadow DOM to being styled from outside, offering users greater control of the look and feel of your component: gist.github.com/lamplightdev…

Web Components don't have to render anything. A render-less component could be used to perform network requests or process data for example: gist.github.com/lamplightdev…