Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Declarative Shadow DOM Style Sharing] adoptedstylesheets relationship to @scope and structuring the feature to be in support of more authors #900

Open
Westbrook opened this issue Oct 24, 2024 · 0 comments

Comments

@Westbrook
Copy link

Is there benefit to consider a broader scope to the adoptedstylesheets by possibly changing its naming and allowing it to be leveraged in other contexts?

adoptedStyleSheets in JS are a feature of document and Shadow Root, and with document more often receiving its styles via <link> or <style> elements, there is less benefit to non-Shadow DOM consumption to add a feature in this naming. However, with the advent of @scope {} and the ability to apply it relationally in the DOM:

<div>
  <style>
    @scope {
      :scope { /* styles for div */ }
    }
  </style>
  <!-- -->
</div>

At scale this problem is shaped very similar to what this proposal looks to solve for Shadow DOM users. See some research in this area by Ryan Townsend for more information on performance in this space.

With module script-like references, could the attribute be changed to a more generic relatedStyleSheets, or something more neatly yak shaved, that when applied to a live element (non-<template> elements) took the contents of the listed sheets and applied them to the host element as if they were wrapped in @scope {} as seen in the example above?

<div relatedstylesheet="./shared-scope.css"><!-- --></div>

And when applied to a <template> element, or more specifically a template element with the shadowrootmode attribute, then it would apply as an adopted style sheet as outlined in the proposal!

While it expands the scope of the feature, the applicability across a wider number of development contexts seems like an appealing addition to the conversation here.

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

No branches or pull requests

1 participant