[Declarative Shadow DOM Style Sharing] adoptedstylesheets
relationship to @scope
and structuring the feature to be in support of more authors #900
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.