From d8cad1fd0bb6019ecb74741f6de1d68cd8825b7e Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 10 Aug 2022 11:52:51 -0700 Subject: [PATCH 1/2] Clarify relationship between scoped registries and shadow roots MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit After reading through this proposal, I was a bit confused about the relationship between shadow roots and custom elements. It took me a moment to realize that custom elements' definitions are not defined by the shadow root _attached_ to them, but instead to the shadow root that _contains_ them. This PR adds some clarifying notes that hopefully would help others reading this document. (Assuming that my interpretation is correct. 🙂) --- proposals/Scoped-Custom-Element-Registries.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/proposals/Scoped-Custom-Element-Registries.md b/proposals/Scoped-Custom-Element-Registries.md index b95df322..7f797183 100644 --- a/proposals/Scoped-Custom-Element-Registries.md +++ b/proposals/Scoped-Custom-Element-Registries.md @@ -60,6 +60,8 @@ registry.define('other-element', OtherElement); Definitions in this registry do not apply to the main document, and vice-versa. The registry must contain definitions for all elements used. +Note that, in the above example, `` is defined in the scoped registry, not ``. The registry applies to definitions _within_ the shadow root, not the element that the shadow root is attached to. + Once a registry and scope are created, element creation associated with the scope will use that registry to look up custom element definitions: ```js @@ -119,6 +121,23 @@ As a result, it must limit constructors by default to only looking up registrati This poses a limitation for authors trying to use the constructor to create new elements associated to scoped registries but not registered as global. More flexibility can be analyzed post MVP, for now, a user-land abstraction can help by keeping track of the constructor and its respective registry. +### Note on light DOM custom elements + +Custom elements that use light DOM (i.e. that don't call `this.attachShadow()`) may be scoped, but they must be scoped within a shadow root. For example: + +```html + + + #shadow-root (registry=myCustomRegistry) + +
Light DOM
+ + + +``` + +In the above example, `` is scoped within the shadow root of its containing ``, whereas `` is defined at the global document level. + ## API ### CustomElementRegistry From 52e210b4f83c66d44506c5e258091624eed171cc Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 10 Aug 2022 14:59:07 -0700 Subject: [PATCH 2/2] tweak language --- proposals/Scoped-Custom-Element-Registries.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proposals/Scoped-Custom-Element-Registries.md b/proposals/Scoped-Custom-Element-Registries.md index 7f797183..359f5892 100644 --- a/proposals/Scoped-Custom-Element-Registries.md +++ b/proposals/Scoped-Custom-Element-Registries.md @@ -60,7 +60,7 @@ registry.define('other-element', OtherElement); Definitions in this registry do not apply to the main document, and vice-versa. The registry must contain definitions for all elements used. -Note that, in the above example, `` is defined in the scoped registry, not ``. The registry applies to definitions _within_ the shadow root, not the element that the shadow root is attached to. +Note that, in the above example, `` is scoped to the shadow root inside of ``. So `` is defined within the scoped registry, not ``. Once a registry and scope are created, element creation associated with the scope will use that registry to look up custom element definitions: