Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Polymer 1.0: element scoped CSS via <link> leaks outside the element (not truly scoped) #2367

Closed
viridium opened this issue Aug 25, 2015 · 3 comments

Comments

@viridium
Copy link

I put the picture-frame element, from [1], in a Chrome extension; I included the index.html. After moving the script to an external file to bypass CSP issues [2], it worked fine. Next, I opened index.html and wrapped the content in a div. Then, I went back to the picture-frame element and moved the CSS into a separate file, naturally replacing the style element with a link element.

The style rules suddenly started to apply, incorrectly, to the div from index.html. I tried moving the style after the template element, as per a suggestion from Polymer 0.5 [3], but there was no change. The styles should apply only to the element defining them, whether they are delivered via style or link href.

[1] https://www.polymer-project.org/1.0/docs/start/quick-tour.html#compose-with-local-dom
[2] https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=393307
[3] #779

@viridium viridium changed the title Polymer 1.0: linked CSS in element leaks outside the element Polymer 1.0: element scoped CSS via <link> leaks outside the element (not truly scoped) Aug 25, 2015
@sorvell
Copy link
Contributor

sorvell commented Aug 25, 2015

Including a stylesheet for an element definition via <link rel="stylesheet"> is not supported in Polymer 1.0. The platform currently lacks support for doing this.

Polymer does support a couple different wants to use style data separated from an element's dom-module. See https://www.polymer-project.org/1.0/docs/devguide/styling.html#external-stylesheets which will soon be updated with this info: #2229

@viridium
Copy link
Author

Hmmm; interesting. Will it be supported at some time? If not, I suppose I could pay a small overhead cost by wrapping my CSS in some boilerplate to keep it separate from my element's markup -- essentially, I'll make a second CSS-only element next to the main one.

@sorvell
Copy link
Contributor

sorvell commented Aug 26, 2015

No, there are no plans to directly support <link rel="stylesheet">.

Because of Polymer shims style data, it needs access to style text. Unfortunately, this is not possible using link. In Polymer 0.5, link was supported via xhr'ing the style data; however, this caused other problems by introducing significant lifecycle timing complexity. We've chosen not to do this for 1.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants