This does the same as .closest() from inside any child (shadow)DOM but walking up the DOM crossing shadowroot Boundaries Optimized for (extreme) minification //declared as method on a Custom Element: closestElement( selector, // selector like in .closest() base = this, // extra functionality to skip a parent __Closest = (el, found = el && el.closest(selector)) … Read more
Actually <template> elements can be imported from another document via HTML Imports, along with the Javascript code that will define the custom element: <link rel=”import” src=”https://stackoverflow.com/questions/52435955/my-custom-element.html”> … <custom-element></custom-element> So it doesn’t need to be included in a every HTML document. This post shows a minimal example. HTML Imports are implemented only in Chrome and Opera. … Read more
Blink, the web engine that currently implements Custom Element v1 (in Chrome v53+ for example) only supports autonomous custom elements: see open Blink bug. If you want to define customized built-in elements (i.e. <button> extension), you’ll need to use a polyfill like the one from Web Reflection. Alternatly, you can still use the Custom Element … Read more
To use an imported font (e.g., FontAwesome) in a Shadow DOM, you should: 1° Declare the Font First, include the <link rel=”stylesheet”> element in the main document. It will declare a @font-face CSS rule that will make the font available for all the text in the document. 2° Import the Stylesheet Then, import the same … Read more
I think the Chrome/Safari behaviour is less intuitive for the beginners, but with some more complex scenarios (for example with child custom elements) then it is much more consistant. See the different examples below. They act strangely in Firefox… Another use case that I don’t have the courage to code: when a document is parsed, … Read more
styling ::slotted elements in shadowDOM TL;DR ::slotted Specs: https://drafts.csswg.org/css-scoping/#slotted-pseudo slotted content remains in light DOM, is reflected to a <slot> in shadow DOM ::slotted(x) targets the lightDOM outer-Element (aka ‘skin’), NOT the SLOT in shadowDOM ::slotted(x) takes basic selectors Inheritable styles trickle into shadowDOM https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ For the latest WHATWG discussion on SLOT and related topics, … Read more
The Custom Elements specification is available in Chrome and Opera, and becoming available in other browsers. It provides a means to register custom elements in a formal manner. Custom elements are new types of DOM elements that can be defined by authors. Unlike decorators, which are stateless and ephemeral, custom elements can encapsulate state and … Read more