Web Component
Two vanilla custom elements with open shadow roots. Their parts live inside the shadow tree, and they render after the page loaded — the anatomy finds them anyway.
data-part inside a shadow root
root The <demo-field> host element, in the page's light DOM.
label Inside the shadow root. Tied to the input with for, both in the same shadow tree.
control Inside the shadow root. The bordered box holding the icon slot and the input.
icon A slotted child: it lives in the light DOM, next to the host, and renders through <slot name="icon">.
input Inside the shadow root. The native <input>.
hint Inside the shadow root. Supporting text under the control.
Native part attributes, with shadowParts
control The <button role="switch">, exposed as part="control".
track Exposed as part="track" — what demo-switch::part(track) styles from outside.
thumb Exposed as part="thumb". No data-part anywhere: shadowParts reads the native names.
label Exposed as part="label", wrapping the default slot.