Style Custom Elements in Polymer
In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.
Kevin
~ 9 years ago
One thing to note is that an alternate to using the var(--property-that-can-override, --default-property-if-nothing-is-provided) pattern currently is to define default properties is leveraging the :host psuedo-selector that yields to light DOM styles that'll take precedence.
An example of this is the following: http://codepen.io/lozandier/pen/JYweXX.
The properties defined by users potentially using <style is="custom-style"> takes precedence over the default values originally defined using the :host selector in the component's stylesheet.