The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Style Custom Elements in Polymer

Style Custom Elements in Polymer

5:55
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.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
Kevin

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 takes precedence over the default values originally defined using the :host selector in the component's stylesheet.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?