Bug 15818 - [Shadow]: Consider a notion of shared stylesheet
[Shadow]: Consider a notion of shared stylesheet
Status: REOPENED
Product: WebAppsWG
Classification: Unclassified
Component: Component Model
unspecified
PC All
: P2 normal
: ---
Assigned To: Dimitri Glazkov
public-webapps-bugzilla
:
Depends on: 18441
Blocks: 16009
  Show dependency treegraph
 
Reported: 2012-01-31 23:04 UTC by Dimitri Glazkov
Modified: 2013-07-02 16:47 UTC (History)
10 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dimitri Glazkov 2012-01-31 23:04:34 UTC
Having scoped styles is cool, but having a designated stylesheet that's shared among a set of shadow DOM subtrees has more potential for better performance and ease of use.
Comment 1 Dominic Cooney 2012-02-01 06:52:03 UTC
There's a similar problem when using shadow DOM to implement widgets--the shadow DOM of all instances of the widget need to be populated with a copy of the same DOM structure.

So it seems like there is overlap: Implementations could implement a lightweight copy-on-write clone of <style scoped> and handle the styling with the cloning of the rest of the widget DOM.

The benefit of the shared stylesheet would be that it would be possible to share a stylesheet for different kinds of widgets (buttons *and* sliders, etc.)

Would it be crazy to make style resolution for shadow DOM follow where these DOMs were defined? e.g. in the case of some future "custom element" spec:

<div>
<style scoped>
... definitions for the set of widgets ...
</style>
<div>
  <style scoped>
    ... definitions for the clickable widgets ...
  </style>
  <element name="x-button">
    <style scoped>
      ... definitions for the button ...
    </style>
    <template>
      ...
    </template>
  </element>
  <element name="x-checkbox">
    <style scoped>
      ... definitions for the checkbox ...
    </style>
    ...
</div>
... other kinds of widgets ...
</div>
Comment 2 Dimitri Glazkov 2012-03-14 22:15:17 UTC
Here's what I am thinking.

At Shadow DOM spec level, we add a new, simple API to add a stylesheet to ShadowRoot. This stylesheet will be explicitly read-only (no CSSOM):

ShadowRoot.addStylesheet(url);
ShadowRoot.removeStylesheet(url);

Maybe it's a Map of some read-only CSSStyleSheet objects?

This will allow authors pretty nice level of control over shared stylesheets.

At the Custom Element spec level, we will need to come up with some sort of syntax to specify these shared stylesheets as URLs. Maybe:

<element><link rel="stylesheet">...

or something along the lines of Dominic's idea.

Travis, Tony, Anne (as the former CSSOM editor) -- what do you think?
Comment 3 Travis Leithead [MSFT] 2012-03-15 20:29:19 UTC
(Replying for Tony as he just had a new baby :)

I think this is definately a step in the right direction as compared with <style scoped>.

It gives the component author a chance to exclusively share stylesheet objects, which is great, and the implementation a chance to optimize around that shared instance (rather than having multiple copies of a scoped stylesheet hanging around).

There may be some room to further refine this, but as mentioned, this is definately a step up.
Comment 4 Dimitri Glazkov 2012-05-15 19:58:23 UTC
I decided to punt this to post-first WD.
Comment 5 Tony Ross [MSFT] 2012-07-31 23:47:09 UTC
I'd prefer to keep the read-write nature of the CSS OM here if we can. That way a component author can apply tweaks to the core stylesheet dynamically which affect all shadow DOM subtrees referencing that stylesheet.

Also rather than passing an URL, what about passing a reference to an actual <link> or <style> element? This aligns more closely with the proposal for custom elements while providing a bit more flexibility for dynamic generation (e.g. if a framework wanted to inline all CSS as part of their JS file, then build out a <style> element at runtime).
Comment 6 Dimitri Glazkov 2012-08-01 16:39:11 UTC
(In reply to comment #5)
> I'd prefer to keep the read-write nature of the CSS OM here if we can. That way
> a component author can apply tweaks to the core stylesheet dynamically which
> affect all shadow DOM subtrees referencing that stylesheet.
> 
> Also rather than passing an URL, what about passing a reference to an actual
> <link> or <style> element? This aligns more closely with the proposal for
> custom elements while providing a bit more flexibility for dynamic generation
> (e.g. if a framework wanted to inline all CSS as part of their JS file, then
> build out a <style> element at runtime).

Yes, I am leaning toward this as well.
Comment 7 Dimitri Glazkov 2012-08-01 21:09:31 UTC
Ok, what do you think? http://dvcs.w3.org/hg/webcomponents/rev/1456fe73dfb0
Comment 8 Dimitri Glazkov 2012-08-02 19:43:54 UTC
Please reopen if you feel the API is bad or file new bugs to tweak it.
Comment 9 Steve Orvell 2013-07-02 03:43:06 UTC
Reopening this bug because the proposed edit to the spec to contain addStyleSheet is not currently in the spec.

What happened to it? Was it abandoned in favor of another idea?
Comment 10 Dimitri Glazkov 2013-07-02 03:46:38 UTC
They were removed in bug 21923. Do we need them?
Comment 11 Steve Orvell 2013-07-02 04:18:04 UTC
I think there are 2 issues here that still need consideration. Perhaps we need a separate bug for the second one?

1. There should be a way to share styling such that the author can define the styles once and use them in multiple shadowRoots.

2. There should be a way to use an external stylesheet (link rel="stylesheet") with a shadowRoot.
Comment 12 Dimitri Glazkov 2013-07-02 16:00:08 UTC
(In reply to comment #11)
> I think there are 2 issues here that still need consideration. Perhaps we
> need a separate bug for the second one?

Sounds good.

> 
> 1. There should be a way to share styling such that the author can define
> the styles once and use them in multiple shadowRoots.
> 
> 2. There should be a way to use an external stylesheet (link
> rel="stylesheet") with a shadowRoot.

Also adding wchen, mrbkap, who are working on this at Mozilla.
Comment 13 Steve Orvell 2013-07-02 16:20:21 UTC
Bug for loading stylesheets via link rel="stylesheet":

https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539