Web Component tips by @lamplightdev. Writing a short & sweet summary of the week's #webcomponents news https://xitter.cf/t.co/PeIQLfuLWJ @lamplightdev@mastodon.social
UK
Joined August 2020
- Tweets225
- Following605
- Followers794
- Likes401
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…
ALT Code sample - see linked gist
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…
ALT Code sample - see linked gist
Custom elements can be used to 'retro fit' existing sites simply by including some extra markup: gist.github.com/lamplightdev…
ALT Code sample - see linked gist
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…
ALT Code sample - see linked gist
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…
ALT Code sample - see linked gist
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…
ALT Code sample - see linked gist
CSS custom properties defined on containing elements are also available inside the Shadow DOM, enabling you to offer a level of customisation to the user of your component: gist.github.com/lamplightdev…
ALT Code sample - see linked gist
Content inside a <slot> tag is fallback content - shown only if no content in your Light DOM is assigned to that slot: gist.github.com/lamplightdev…
ALT Code sample - see linked gist
An unnamed slot in your Shadow DOM will show all parts of the Light DOM that are not assigned to a named slot: gist.github.com/lamplightdev…
ALT Code sample - see linked gist
Slots are 'holes' in your Shadow DOM through which you can see parts of your Light DOM (the HTML inside your custom element tags): gist.github.com/lamplightdev…
ALT Code sample - see linked gist
The :host CSS function styles the custom element containing the Shadow DOM it's declared within. You can use the :host(<selector>) form to narrow the styling to only elements that match the selector: gist.github.com/lamplightdev…
ALT Code sample - see linked gist
Shadow DOM is isolated from most, but not all, of the outer styling of the document - *inheritable styles* applied to any elements containing your component will also be applied to the Shadow DOM. You can override this behaviour with 'all: initial': gist.github.com/lamplightdev…
ALT Code sample - see linked gist
The <template> element lets you create an inert DOM fragment ready for later use. The template content is parsed by the browser but is not rendered or activated, so external resources will not load until it is cloned and inserted into the DOM: gist.github.com/lamplightdev…
ALT Code sample - see linked gist