Skip to content

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

Open
@Westbrook

Description

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.

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions