As it turns out the Shadow DOM retargets click events and encapsulates the events in the shadow. React does not like this because they do not support Shadow DOM natively, so the event delegation is off and events are not being fired. What I decided to do was to rebind the event to the actual … Read more
For others who end up here, the specific property you’re looking for to break out of the shadow root ‘jail’ is “composed”. So: this.checkEvent = new CustomEvent(“check”, { bubbles: true, cancelable: false, composed: true }); You can also add another property, “detail” which will carry custom data on the event, if you like. More info … 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
As already stated by Juvian in the comments: constructor() is called when the element is created. connectedCallback() is called when (after) the element is attached to the DOM. The constructor() call is not specific to Custom Elements, it occurs with any object creation (typically created with the new operator), and not only HTML Elements. In … Read more
The error is correct, and could occur in both cases. You’re getting “lucky” because some current implementations of Custom Elements do not enforce this requirement. The constructor for a custom element is not supposed to read or write its DOM. It shouldn’t create child elements, or modify attributes. That work needs to be done later, … Read more
There is a way to check whether an element was registered. Registered elements have their own constructors, while unregistered ones would use plain HTMLElement() for constructor (or HTMLUnknownElement() whether the name is not valid, but this is out of scope of the question): document.registerElement(‘x-my-element’); document.createElement(‘x-my-element’).constructor //⇒ function x-my-element() { [native code] } document.createElement(‘x-my-element-not-registered’).constructor //⇒ function … 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