FF149 ShadowRoot referenceTarget and friends minor update#43543
FF149 ShadowRoot referenceTarget and friends minor update#43543hamishwillee wants to merge 2 commits intomdn:mainfrom
Conversation
github-actions
bot
added
Content:HTML
|
|
||
| {{APIRef("Shadow DOM")}} | ||
|
|
||
| The **`Element.attachShadow()`** method attaches a shadow DOM tree to the specified element and returns a reference to its {{domxref("ShadowRoot")}}. |
There was a problem hiding this comment.
This change just moves us to Web API template, moving the following stuff into a description.
| The **`attachShadow()`** method attaches a {{domxref("ShadowRoot")}} to the specified element and returns a reference to it. | ||
|
|
||
| The returned {{domxref("ShadowRoot")}} is the root node of a shadow tree, which can then be populated with its own DOM content. | ||
| The element to which the shadow root is attached is referred to as the "shadow host", and remains in its original DOM. | ||
|
|
||
| The `ShadowRoot` acts as a boundary between the original DOM and the shadow tree. | ||
| It controls encapsulation — for example, styles defined inside the shadow tree do not affect the original DOM. |
There was a problem hiding this comment.
This is new. IMO it is worth saying that the shadow root is what is created, initially empty.
Preview URLs (6 pages)Flaws (1) Note! 5 documents with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
External URLs (1)URL:
(comment last updated: 2026-03-24 07:09:59) |
| @@ -0,0 +1,33 @@ | |||
| --- | |||
There was a problem hiding this comment.
FYI "a nothing doc". Not useful but following the pattern of other docs in this this interface.
| ### Basic usage | ||
|
|
||
| ```html | ||
| <label for="consent">I consent to cookies</label> | ||
| <sp-checkbox id="consent"></sp-checkbox> | ||
|
|
||
| <hr /> | ||
| <div id="log"></div> | ||
| ``` | ||
|
|
||
| ```js | ||
| function log(...args) { | ||
| const debug = document.getElementById("log"); | ||
| debug.innerHTML += args.join(" ") + "<br>"; | ||
| } | ||
| ``` | ||
|
|
||
| ```js | ||
| customElements.define( | ||
| "sp-checkbox", | ||
| class Checkbox extends HTMLElement { | ||
| checked = "mixed"; | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.shadowRoot_ = this.attachShadow({ | ||
| mode: "closed", | ||
| //referenceTarget: "input", | ||
| }); | ||
|
|
||
| this.shadowRoot_.referenceTarget = "input"; | ||
|
|
||
| this.render(); | ||
| } | ||
| render() { | ||
| this.shadowRoot_.innerHTML = ` | ||
| <input id="input" | ||
| type="checkbox" | ||
| ${this.checked == "true" ? "checked" : ""} | ||
| aria-checked=${this.checked == "indeterminate" ? "mixed" : this.checked}> | ||
| <span id="box"></span>`; | ||
|
|
||
| const input = this.shadowRoot_.getElementById("input"); | ||
|
|
||
| log("aria-checked:", input.getAttribute("aria-checked")); | ||
| log("aria-label:", input.getAttribute("aria-label")); | ||
| log("aria-labelledby:", input.getAttribute("aria-labelledby")); | ||
| } | ||
| }, | ||
| ); | ||
| ``` |
There was a problem hiding this comment.
Still not sure what example to show - this is a modification of the explainer. It is hard because you can't propgrammatically log the supposedly affected attributes, such as aria-labelledby, to show the effect.
I explained this above in the description - the browser doesn't change the element, it computes it when needed.
Open to ideas that don't require a screen reader or other accessibility tools.
Also not sure the right way to "feature test".
There was a problem hiding this comment.
@meyerweb Any ideas on a good live example at this early stage of the feature?
Note, I'm not planning on going much further with docs on this until it is in preview release/FF nightly. What you did before was sufficient, this is just a bit of tidy.
Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
2 participants
FF149 added support for
referenceTargetandshadowRootReferenceTargetattributes behind a pref. These are already mostly documented in #42323. This is pretty basic, but it was and remains about the right level because this isnt supported in releases or preview yet. At that point we should create guide material and cross link (this can be generated from the explainer.What this does is get us a little bit closer so that when we have to update there is less to do.
I have put a little bit more work into
ShadowRoot.referenceTargetdocs because it ONLY affects this property. So we could in theory add examples and so on to this without being confusing for other docs. See inline comments.Related docs work can be tracked in #43453