A custom element is a browser-owned integration point, not just a reusable markup fragment. Its host can arrive before its definition, move between containers, receive new attributes, and participate in forms or assistive-technology navigation. This track follows a shared case-review control embedded in three host applications. It treats upgrade timing, event boundaries, form submission, and styling as contracts that an integrator can test without reaching into private component internals.
Topics in this track
- Custom Element Upgrade and Reconnection — Handle pre-definition markup, observed attributes, repeated connection, and host-driven moves without duplicate side effects.
- Shadow Slots, Events, and Focus Contracts — Define projected content ownership, event crossing, and focus behavior at a shadow boundary.
- Form-Associated Custom Controls and Native Fallback — Make a shared decision control submit, validate, reset, and recover with a plain-form path.
- Shadow Style Tokens, Parts, and Shared Sheets — Expose deliberate theme hooks while keeping internal selectors and stylesheet ownership stable.
Prerequisite paths
Web Components and Shadow Boundaries; Component Boundaries and State Ownership.
Neighbor track
Progressive Browser Compatibility.
Practice path
Build Project: interoperable case-decision control and check decisions in Web Development: components and compatibility quiz.