FF124 shadowRootClonable and friends

[hamishwillee]

This documents:

• [x] HTMLTemplateElement.shadowRootClonable and shadowrootclonable attribute of the <template> element - in progress
• [x] HTMLTemplateElement.shadowRootDelegatesFocus and shadowrootdelegatesfocus attribute of the <template> element
• [x] HTMLTemplateElement.shadowRootMode (attribute already done)

This is ready for review (confirmations below are mostly for stuff that predates this PR). I want to answer them, but that can happen as a post process, and the docs are useful if we can't get proper answers.

I'm still waiting on a few confirmations in https://bugzilla.mozilla.org/show_bug.cgi?id=1880188#c5 and https://github.com/mdn/content/pull/33325#discussion_r1584290677 for stuff like:

• What are the implications if something is cloned, or it can't be cloned.
• What happens to the focus if it is not delegated
• The mode is accessible from the HTMLTemplateElement - can it be changed? Can you create a new shadow DOM by cloning such and element, modifying the mode, and then adding it to the DOM.

Last of all, the examples are not "Live samples" - I did write some test code for them though. I think I may be able to get this to work "Live" when some of the new safeHTML APIs are supported but they are too new.

Related docs work in #33160

[github-actions[bot]]

Preview URLs (10 pages)

- [`/en-US/docs/Web/API/Element/attachShadow`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Element/attachShadow) - [`/en-US/docs/Web/API/HTMLTemplateElement/shadowRootClonable`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLTemplateElement/shadowRootClonable) - [`/en-US/docs/Web/API/HTMLTemplateElement/shadowRootDelegatesFocus`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLTemplateElement/shadowRootDelegatesFocus) - [`/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLTemplateElement/shadowRootMode) - [`/en-US/docs/Web/API/HTMLTemplateElement`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/HTMLTemplateElement) - [`/en-US/docs/Web/API/ShadowRoot/clonable`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/ShadowRoot/clonable) - [`/en-US/docs/Web/API/ShadowRoot/delegatesFocus`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/ShadowRoot/delegatesFocus) - [`/en-US/docs/Web/API/ShadowRoot/mode`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/ShadowRoot/mode) - [`/en-US/docs/Web/API/Web_components/Using_shadow_DOM`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Web_components/Using_shadow_DOM) - [`/en-US/docs/Web/HTML/Element/template`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/template)

External URLs (1)

URL: [`/en-US/docs/Web/API/Element/attachShadow`](https://pr33325.content.dev.mdn.mozit.cloud/en-US/docs/Web/API/Element/attachShadow) Title: `Element: attachShadow() method` - (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-05-17 02:06:28)

[hamishwillee]

@chrisdavidmills This is good to review. I'm going to tidy part of it in https://github.com/mdn/content/pull/33600 (which adds a shadowrootserializable).