[Shadow]: Consider a notion of shared stylesheet (bugzilla: 15818)

[hayatoito]

Title: [Shadow]: Consider a notion of shared stylesheet (bugzilla: 15818)

Migrated from: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818

---

comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c0
Dimitri Glazkov wrote on 2012-01-31 23:04:34 +0000.

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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c1
Dominic Cooney wrote on 2012-02-01 06:52:03 +0000.

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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c2
Dimitri Glazkov wrote on 2012-03-14 22:15:17 +0000.

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:

...

or something along the lines of Dominic's idea.

Travis, Tony, Anne (as the former CSSOM editor) -- what do you think?

---

comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c3
Travis Leithead [MSFT] wrote on 2012-03-15 20:29:19 +0000.

(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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c4
Dimitri Glazkov wrote on 2012-05-15 19:58:23 +0000.

I decided to punt this to post-first WD.

---

comment: 5
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c5
Tony Ross [MSFT] wrote on 2012-07-31 23:47:09 +0000.

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 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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c6
Dimitri Glazkov wrote on 2012-08-01 16:39:11 +0000.

(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

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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c7
Dimitri Glazkov wrote on 2012-08-01 21:09:31 +0000.

Ok, what do you think? http://dvcs.w3.org/hg/webcomponents/rev/1456fe73dfb0

---

comment: 8
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c8
Dimitri Glazkov wrote on 2012-08-02 19:43:54 +0000.

Please reopen if you feel the API is bad or file new bugs to tweak it.

---

comment: 9
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c9
Steve Orvell wrote on 2013-07-02 03:43:06 +0000.

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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c10
Dimitri Glazkov wrote on 2013-07-02 03:46:38 +0000.

They were removed in bug 21923. Do we need them?

---

comment: 11
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c11
Steve Orvell wrote on 2013-07-02 04:18:04 +0000.

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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c12
Dimitri Glazkov wrote on 2013-07-02 16:00:08 +0000.

(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
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=15818#c13
Steve Orvell wrote on 2013-07-02 16:20:21 +0000.

Bug for loading stylesheets via link rel="stylesheet":

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

[hayatoito]

Closing, given that we have http://tabatkins.github.io/specs/construct-stylesheets/.