3. 3
    Style Custom Elements in Polymer
    5m 55s

Style Custom Elements in Polymer

InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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
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.