Menu
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?
924
Polymer includes an experimental feature to support loading external stylesheets that will be applied to the local DOM of an element. This is typically convenient for developers who like to separate styles, share common styles between elements, or use style pre-processing tools.
Avoid copy-pasting the same CSS in multiple style sheets. You can share a style sheet between the global scope and multiple component scopes. One common use case for shared style sheets is to define typographic styles which you want to be applied consistently across the whole application.
Polymer provides a declarative syntax for attaching event listeners to shadow DOM children. It also provides an optional library for handling gesture events. Data system. The Polymer data system provides data binding to properties and attributes; property observers; and computed properties.
Shadow DOM permits encapsulation of styling rules for custom elements. You can freely define styling information for your elements, such as fonts, text colors, and classes, without fear of the styles applying outside the scope of your element.
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.
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
