CSS and Polymer

@AndrewRota | Polymer Hack Day

CSS & Polymer == CSS & WebComponents

Styling Polymer elements is nodifferent than styling customelements.- Polymer

Web Components APIs

Custom Elements

HTML Templates

HTML Imports

Shadow DOM

Web Components APIs

Custom Elements

HTML Templates

HTML Imports

Shadow DOM

Shadow DOM// Create Shadow Rootdocument.getElementById('my‐element').createShadowRoot();// Access Shadow Rootdocument.getElementById('my‐element').shadowRoot;

User Agent Shadow DOM<input type="date">

mm/dd/yyyy

Shadow DOMShadow DOM.Light DOM.<div id="my‐first‐element"></div><p>Light DOM.</p>

// Create Shadow Rootvar s = document.getElementById('my‐first‐element').createShadowRoot();// Add Styles and Texts.innerHTML += '<style>p { color: crimson; margin: 5px 0 5px 20p;}</style>';s.innerHTML += '<p>Shadow DOM.</p>';

Shadow DOM and <content>Hello, Polymer Hack Day!

<div id="my‐third‐element">  <span class="name">Polymer Hack Day</span>  <span class="greeting">Hello</span></div>

var s = document.getElementById('my‐third‐element').createShadowRoot();s.innerHTML += '<style>strong { color: crimson; }</style>';s.innerHTML += '<content select=".greeting"></content>, ';s.innerHTML += '<content select=".name"></content>!';            

Into the Light/* pseudo‐class for host element*/:host { }/* functional pseudo‐class, for host if it matches the selector argument */:host() { }/* functional pseudo‐class, for host node with parent that matches selector argument */:host‐context() { }/* pseudo‐element, for distributed notes rendered via a <content> element */::content { }

Into the Dark/* pseudo‐element for shadow roots */::shadow { }

/* combinator for selecting through shadow boundaries */body /deep/ p { }

[/deep/] is basically a super-descendant combinator. - CSS Scoping Module Draft, Issue 6

:unresolved

Polyfilling the Shadow DOM

Because polyfilling the stylingbehaviors of Shadow DOM isdifficult, Polymer has opted tofavor practicality andperformance over correctness. - Polymer

How it Works

Selectors are prepended with elementdescendent selectors.underline { text‐decoration: underline }

... is reformated to:x‐foo .underline { text‐decoration: underline }

How it Works

:host and :host() are replaced by elementselectors:host { color: #333333; }:host(.blue) { color: #000080 }

... is reformated to:x‐element { color: #333333; }x‐element.blue { color: #000080 }

Lower Bound EncapsulationPlatform.ShadowCSS.strictStyling = true;

<span x‐element></span>

Polyfill Limitations

Full style encapsulation

:host() supports one level of functionalarguments

Paper Elements

Style the Paper Slider

<paper‐slider value="10"></paper‐slider>

Style the Paper Sliderpaper‐slider { width: 95%; }paper‐slider::shadow #sliderBar::shadow #activeProgress {  background‐color: #91D4D4;}paper‐slider::shadow #sliderKnobInner {  background‐color: #b68abd;}paper‐slider::shadow #sliderKnobInner::before {  background‐color: #b68abd;}paper‐slider::shadow #sliderKnobInner::after {  color: #b68abd;}

Style the Paper Input

<paper‐input  label="Type something here."  error="This is a required field."  layout required vertical  class="invalid"></paper‐input>

This is a required field.

Type something here.

Style the Paper Inputpaper‐input {  width: 90%;}paper‐input /deep/ .cursor,paper‐input /deep/ .focused‐underline {    background‐color: #784880;}

Thanks!

Resources- Polymer's A Guide to Styling Elements- WebComponents.org- Web Components: A Tectonic Shift for Web Development by Eric Bidelman- Web Components by Jarrod Overson and Jason Strimpel

Colophon

This presentation was built with Shadow DOM, HTML Templates, HTMLImports, and the Custom Elements <slide­show> and <slide­content>using Web Component Slides.