Skip to content

Conversation

keithamus
Copy link
Contributor

What?

This allows for components which contain a <template data-shadowroot> element to automatically render a shadowRoot with the contents of the template.

Why?

This enables us to implement elements with a shadowDOM much easier than the potentially difficult to use ShadowDOM api of this.attachShadow({ mode: 'open' }).appendChild(template.content.cloneNode(true). This line is very complex and elides many of its own details (what is mode? why is it open? Why do we pass true to cloneNode?)

This also gets us quite close to the "declarative shadow DOM" apis that are currently being proposed - but without holding oursevles to a spec conformant implementation. We may one day deprecate data-shadowroot in favour of simply using the proposed shadowroot attribute.

@keithamus keithamus requested a review from a team as a code owner October 30, 2020 13:41
@github-pages github-pages bot temporarily deployed to github-pages October 30, 2020 13:43 Inactive
@github-pages github-pages bot temporarily deployed to github-pages October 30, 2020 13:44 Inactive
Copy link
Contributor

@koddsson koddsson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!

@keithamus keithamus merged commit 7b1e56f into main Oct 31, 2020
@keithamus keithamus deleted the shadow-dom branch October 31, 2020 00:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants