Bug 295174 – attachShadow throws type error with document-fragment ShadowRoot

• Component: DOM
• Status: RESOLVED FIXED

Created attachment 475703 [details]
CodePen window, showing code for an HTML Template and JS that uses that for attachShadow. There is a console error on the bottom right that says "TypeError: Type error"

Overview:

When using an existing ShadowRoot as the input for the `attachShadow` function, a type error is thrown if the ShadowRoot is in a document fragment (a child of an HTMLTemplateElement).
Related Codepen - https://codepen.io/JRJurman/pen/MYwxxgB?editors=1011

This does not fail in other browsers, and appears to have worked as expected (as much as any of this is expected) up until WebKit 18.4.

This also does not fail if the ShadowRoot is in the same document (that is, if it is not in an HTMLTemplateElement).
See Codepen - https://codepen.io/JRJurman/pen/NPqJJWw?editors=1011

Steps to Reproduce

1) Load codepen - https://codepen.io/JRJurman/pen/MYwxxgB?editors=1011

Actual Results

A "TypeError: Type error" is thrown, the element (when inspected) has no attached ShadowRoot.

Expected Results

Element has attached shadow root with the same properties as the original ShadowRoot.

[Ahmad Saleem]

*** Safari 18.5 ***

// [object ShadowRoot] 
{}

*** Safari Technology Preview 221 ***

// [object ShadowRoot] 
{}

*** Google Chrome 140.0.7267.0 (Official Build) canary (arm64)  ***

// [object ShadowRoot] 
{}

*** Firefox Nightly 142 (20250627092534) ***

// [object ShadowRoot] 
{}

The screenshot from my original post is from Safari Technology Preview - Release 221 (WebKit 20622.1.15.19.2).

In every instance, the object appears the same, as a ShadowRoot object (like noted above). These also always have the expected attributes (e.g. calling `shadowRoot.mode` returns "open"). The error only appears when calling `target.attachShadow(shadowRoot)`.

I created a PR for the Web Platform Tests, if this is deemed as a bug - https://github.com/web-platform-tests/wpt/pull/53467

[Ahmad Saleem]

Now I am able to reproduce on Safari 16 Beta as well.

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #4)
> Now I am able to reproduce on Safari 16 Beta as well.

Safari 26.

[Radar WebKit Bug Importer]

<rdar://problem/154658449>

[Ryosuke Niwa]

Are there any website which gets affected by this issue?

[Ryosuke Niwa]

Pull request: https://github.com/WebKit/WebKit/pull/47395

[Anne van Kesteren]

I created https://github.com/whatwg/dom/pull/1386 to make the DOM Standard account for this.

[EWS]

Committed 296853@main (ec8e119886a4): <https://commits.webkit.org/296853@main>

Reviewed commits have been landed. Closing PR #47395 and removing active labels.