Login/Register
custom-style vs shared-styles in polymer
Asked Answered
Solved csspolymer-1.0
C

1

7

Polymer has support for <style is="custom-style"> which allows you to define styles that only apply to elements, e.g. the shadow DOM.

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

Thus the point of both of them seems to be to allow you to style a polymer element. Why would you use one over the other? The use cases overlap substantially, it seems.

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

Carrasco answered 25/3, 2016 at 17:1 Comment(0)
S
15

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

Use in a custom element

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

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

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

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

Sterile answered 25/3, 2016 at 18:33 Comment(2)
Is there any problem that can only be solved with one technique but not the other? – Carrasco
They are both to support polymer CSS features. The difference is the scope where the styles are applied. CSS in <style is="custom-style"> can't be applied to content inside an elements template unless there are hooks like CSS variables and mixin applications prepared in the elements styles. <style> tags inside a component can be applied to the content of the elements template without limitations. – Lovelace

© 2022 - 2024 — McMap. All rights reserved.