What is Declarative Shadow DOM and how does it improve web components?
Declarative Shadow DOM: traditionally, attaching a shadow root required JavaScript. With <my-widget><template shadowrootmode="open">...</template></my-widget>, the browser parses and attaches the shadow root during HTML parsing, enabling SSR and faster time-to-interactive for component-based pages.
2 / 5
What are form-associated custom elements?
Form-associated custom elements: by returning true from static formAssociated, your element gets an ElementInternals via attachInternals(). You call internals.setFormValue(), setValidity(), and reportValidity() to integrate with the native form lifecycle, including :invalid pseudo-classes and FormData.
3 / 5
What does ElementInternals.setValidity() enable for custom form elements?
setValidity:internals.setValidity({ valueMissing: true }, "Please fill in this field", validationAnchor). The browser shows a native validation popup anchored to your element. The element participates in form.checkValidity() and form.reportValidity() exactly like native inputs.
4 / 5
How does CSS @layer help when styling web components from the outside?
@layer with components: a component can define its defaults in a low-priority layer. Consumers declare @layer overrides; earlier in their layer order, ensuring their rules win. Combined with CSS custom properties exposed through the shadow boundary, this creates a predictable theming contract.
5 / 5
What does the customElements.define()extends option enable?
Customised built-ins:class FancyButton extends HTMLButtonElement { ... } with customElements.define("fancy-button", FancyButton, { extends: "button" }). The element keeps all native button semantics (keyboard focus, form submission, accessibility) while adding custom behaviour. Note: Safari does not support this pattern natively.