[webcomponents] [Shadow]: Add support for external stylesheets using link rel="stylesheet" (bugzilla: 22539) (#82)

Title: [Shadow]: Add support for external stylesheets using link rel="stylesheet" (bugzilla: 22539)

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

----
comment: 0
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c0
*Steve Orvell* wrote on 2013-07-02 16:19:39 +0000.

It is, of course, possible to use external stylesheets within a <style> element via @import-(migrated-from-bugzilla-to-avoid-pinnging-users-in-github). The spec should consider adding support also for including stylesheets via link rel="stylesheet" because:

1. it's simpler
2. it's familiar
3. to avoid possible negative characteristics of @import-(migrated-from-bugzilla-to-avoid-pinnging-users-in-github): https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport

----

comment: 1
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c1
*Steve Orvell* wrote on 2013-07-02 16:23:46 +0000.

We should be able to dimiss point #3 since we're comparing link rel="stylesheet" to:

  <style>
    @import-(migrated-from-bugzilla-to-avoid-pinnging-users-in-github) url(sheet.css);
  </style>

----

comment: 2
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c2
*Dimitri Glazkov* wrote on 2013-07-17 16:48:48 +0000.

*** Bug 19276 has been marked as a duplicate of this bug. ***

----

comment: 3
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c3
*Hayato Ito* wrote on 2014-05-29 08:46:11 +0000.

Hi Steve, is this feature request still valid?

I think this feature request makes sense. Looks reasonable to me.

----

comment: 4
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c4
*Dimitri Glazkov* wrote on 2014-05-29 16:02:15 +0000.

Just as an idea: can we look at how this would desugar into an imperative API?

Elliott had this notion of:

var stylesheet = new CSSStyleSheet(url);
root.stylesheets.add(stylesheet).

Is this basically it?

----

comment: 5
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c5
*Steve Orvell* wrote on 2014-05-29 16:37:41 +0000.

I agree with Dimitri and he has a good basic summary.

We need to resolve the fetching issues with using remote stylesheets in shadowRoots before adding any new behavior, and the imperative api Dimitri outlined should address this.

The basic problem is that if a style element that has remote content (@import-(migrated-from-bugzilla-to-avoid-pinnging-users-in-github)) is added to a shadowRoot, the remote content is fetched. Imagine that an author wants to create N shadowRoots. The author uses the best practice of putting style elements inside shadowRoot but wants to use a remote stylesheet in each one. This currently requires N network requests, even if there is only 1 referenced remote stylesheet.

The idea behind `root.stylesheets.add(stylesheet)` is that you can apply a stylesheet to a shadowRoot without causing it to re-fetch or parse.

----

comment: 6
comment_url: https://www.w3.org/Bugs/Public/show_bug.cgi?id=22539#c6
*Hayato Ito* wrote on 2014-05-30 05:02:10 +0000.

Thank you. That looks very reasonable argument and looks very important from the view of the performance. Totally agreed.

(In reply to Steve Orvell from comment #5)
> I agree with Dimitri and he has a good basic summary.
> 
> We need to resolve the fetching issues with using remote stylesheets in
> shadowRoots before adding any new behavior, and the imperative api Dimitri
> outlined should address this.
> 
> The basic problem is that if a style element that has remote content
> (@import-(migrated-from-bugzilla-to-avoid-pinnging-users-in-github)) is added to a shadowRoot, the remote content is fetched. Imagine
> that an author wants to create N shadowRoots. The author uses the best
> practice of putting style elements inside shadowRoot but wants to use a
> remote stylesheet in each one. This currently requires N network requests,
> even if there is only 1 referenced remote stylesheet.
> 
> The idea behind `root.stylesheets.add(stylesheet)` is that you can apply a
> stylesheet to a shadowRoot without causing it to re-fetch or parse.

---
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/82