Polymer: Un-deprecate external styles
<link rel="import" type="css"> is supported by Polymer, but for whatever reason is deprecated.
Now it is in spec and Chromium (in regular form <link rel=stylesheet>): https://chromium.googlesource.com/chromium/src/+/f0cecf3ac0c7adf7a7c78eeb02cc75d380a9ce4d
So I'd like it to become un-deprecated in Polymer as well, hopefully, with default <link rel=stylesheet> syntax: https://www.polymer-project.org/1.0/docs/devguide/styling#external-stylesheets
nazar-pc
All 13 comments
Yea this is awesome! Now that the platform supports it makes sense to keep the feature.
ebidel
on 4 Aug 2016
Nice!
abdonrd
on 4 Aug 2016
Ah yes finally!! Will this have any impact on style modules though?
On Thu, 4 Aug 2016, 14:40 Abdón RodrÃguez Davila, [email protected]
wrote:
Nice!
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/Polymer/polymer/issues/3837#issuecomment-237644546,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFrDbxMwX5UIra058R4GVPDA1ezjbdo_ks5qcjIYgaJpZM4JcaF3
.
TimvdLippe
on 4 Aug 2016
@TimvdLippe, I hope so
nazar-pc
on 5 Aug 2016
Moving this to 2.0 because it is related to shadow dom v1 and an important new feature we should support.
ebidel
on 9 Sep 2016
@ebidel, Polymer repository is stagnating, can you point me to some roadmap towards 2.x?
nazar-pc
on 9 Sep 2016
timeu
on 9 Sep 2016
Wondering why the paper-* elements are still doing this in HTML imports. Is it because of the compatibility layer?
e.g. https://github.com/PolymerElements/paper-styles/blob/2.0-preview/default-theme.html
kevinSuttle
on 20 Sep 2016
@kevinSuttle That's a different technique, which has never been deprecated. That's a custom-style element inside an HTML import. Importing default-theme.html is equivalent to including that custom-style in the head of your document: it sets document-level styles.
The other techniques described here allow you to import an external stylesheet into an element's shadow DOM. So we're talking about a different goal.
The non-standard <link rel="import" type="css" href="foo.css"> is the one that's deprecated. This is deprecated because it (mis-)uses an HTML import to import a CSS document. Importing it this way (instead of <link rel="stylesheet">) prevents the browser from parsing it as CSS, which allows Polymer to shim the styles before adding them to the page. But: it has several issues, including browser warnings, and forcing the browser to try and parse the CSS doc as HTML.
The style module places your styles inside a <template> in a standard HTML import. Because the styles are in a template, they're inert and Polymer can manipulate them before applying them. These don't have the disadvantages of the type="css" import, but people don't like them because they have to post-process their CSS files to wrap them into style modules.
The shadow DOM v1 spec allows you to simply use <link rel="styelsheet"> inside a shadow tree, which is awesome. However, it may be difficult to polyfill this. So it may not be a great near-term solution.
arthurevans
on 20 Sep 2016
Arthur, if you know off hand, I have a quick unrelated style question. We use a context menu on our grids to change styles live. We parse styles by property out of elements style.cssText; I started noticing advantages in speed so moved to arrayed element factories that i did essentially the same thing for and then just would append child on a user drag button push page change or sugar change. We lost a lot of that in the app-clem.. still works on the grid. Will I still be able to regex the style.cssString? and is there a chance of the factory model coming back… so fast.
On Sep 20, 2016, at 12:29 PM, Arthur Evans [email protected] wrote:
@kevinSuttle https://github.com/kevinSuttle That's a different technique, which has never been deprecated. That's a custom-style element inside an HTML import. Importing default-theme.html is equivalent to including that custom-style in the head of your document: it sets document-level styles.
The other techniques described here allow you to import an external stylesheet into an element's shadow DOM. So we're talking about a different goal.
The non-standard is the one that's deprecated. This is deprecated because it (mis-)uses an HTML import to import a CSS document. Importing it this way (instead of ) prevents the browser from parsing it as CSS, which allows Polymer to shim the styles before adding them to the page. But: it has several issues, including browser warnings, and forcing the browser to try and parse the CSS doc as HTML.
The style module places your styles inside a in a standard HTML import. Because the styles are in a template, they're inert and Polymer can manipulate them before applying them. These don't have the disadvantages of the type="css" import, but people don't like them because they have to post-process their CSS files to wrap them into style modules.
The shadow DOM v1 spec allows you to simply use inside a shadow tree, which is awesome. However, it may be difficult to polyfill this. So it may not be a great near-term solution.
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/Polymer/polymer/issues/3837#issuecomment-248355507, or mute the thread https://github.com/notifications/unsubscribe-auth/AHxnvvZW4pybIcG1HHbOG623v6ln-Ogjks5qsAnqgaJpZM4JcaF3.
jfrazzano
on 20 Sep 2016
@jfrazzano, stay on topic here, please. Go to Slack channel or something for questions irrelevant to this issue.
nazar-pc
on 20 Sep 2016
@arthurevans Thanks for the thorough explanation. That helps a lot.
kevinSuttle
on 20 Sep 2016
Addressed via https://github.com/Polymer/polymer/pull/4344.
sorvell
on 28 Feb 2017
Related issues
alexhx5
·
3Comments
masaoliou
·
3Comments
mbana
·
3Comments
dandv
·
4Comments
myuseringithub
·
3Comments
Most helpful comment
@kevinSuttle That's a different technique, which has never been deprecated. That's a custom-style element inside an HTML import. Importing
default-theme.htmlis equivalent to including that custom-style in the head of your document: it sets document-level styles.The other techniques described here allow you to import an external stylesheet into an element's shadow DOM. So we're talking about a different goal.
The non-standard
<link rel="import" type="css" href="foo.css">is the one that's deprecated. This is deprecated because it (mis-)uses an HTML import to import a CSS document. Importing it this way (instead of<link rel="stylesheet">) prevents the browser from parsing it as CSS, which allows Polymer to shim the styles before adding them to the page. But: it has several issues, including browser warnings, and forcing the browser to try and parse the CSS doc as HTML.The style module places your styles inside a
<template>in a standard HTML import. Because the styles are in a template, they're inert and Polymer can manipulate them before applying them. These don't have the disadvantages of thetype="css"import, but people don't like them because they have to post-process their CSS files to wrap them into style modules.The shadow DOM v1 spec allows you to simply use
<link rel="styelsheet">inside a shadow tree, which is awesome. However, it may be difficult to polyfill this. So it may not be a great near-term solution.