, which allows you to define styles that apply only to el...">
Geek Answers Handbook

Custom Style and General Styles in Polymer

The polymer supports <style is="custom-style"> , which allows you to define styles that apply only to elements, for example. shadow DOM.

Polymer also supports <dom-module id="shared-styles"> , which allows you to pack a set of style declarations that can be imported into an element definition.

So the point of both of them seems to allow you to create a polymer element. Why are you using one over the other? The use cases seem to overlap.

Additional confusion: shared-styles can be imported into custom-style . Why would you do this? Why not?

+6
source share
1 answer

A <dom-module id="my-shared-styles"> declares a reusable module hat that you can import into elements or <style is="custom-style"> tags.

Usage in user element

 <dom-module id="my-element> <template> <style include="my-shared-styles"></style> ... </template> </dom-module>

or in the <style> outside the custom element (for example, in <head> )

 <head> <style is="custom-style" include="my-shared-styles"></style> </head>

<style is="custom-style"> is only required if you want to use the Polymer CSS functions (CSS variables and mixins) in a style element that is not inside the <dom-module> . Inside <dom-module> enough <style> enough.

+13
source

More articles:


All Articles