v152 · dom · accessibility
Commandfor Crossing Shadow Boundary
With referenceTarget, a <button commandfor> outside the component can control a <dialog> inside its shadow DOM — no JS glue to reach into the shadow root.
Feature detection pending…
How it will work
When referenceTarget ships, the custom element declares its inner dialog as the reference target, and external commandfor works across the shadow boundary:
class CustomDialog extends HTMLElement {
connectedCallback() {
this.attachShadow({
mode: "open",
referenceTarget: "inner-dialog"
});
// shadow root contains <dialog id="inner-dialog">
}
}
<button commandfor="host-dialog" command="show-modal">
Open
</button>
<custom-dialog id="host-dialog"></custom-dialog>
Without referenceTarget, commandfor cannot find the dialog inside the shadow DOM.