CSS and Polymer
-
Upload
andrew-rota -
Category
Technology
-
view
350 -
download
0
description
Transcript of CSS and Polymer
![Page 2: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/2.jpg)
CSS & Polymer == CSS & WebComponents
Styling Polymer elements is nodifferent than styling customelements.- Polymer
![Page 3: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/3.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 4: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/4.jpg)
Web Components APIs
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
![Page 5: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/5.jpg)
Shadow DOM// Create Shadow Rootdocument.getElementById('my‐element').createShadowRoot();// Access Shadow Rootdocument.getElementById('my‐element').shadowRoot;
![Page 6: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/6.jpg)
User Agent Shadow DOM<input type="date">
mm/dd/yyyy
![Page 7: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/7.jpg)
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>';
![Page 8: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/8.jpg)
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>!';
![Page 9: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/9.jpg)
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 { }
![Page 10: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/10.jpg)
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
![Page 11: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/11.jpg)
:unresolved
![Page 12: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/12.jpg)
![Page 13: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/13.jpg)
Polyfilling the Shadow DOM
Because polyfilling the stylingbehaviors of Shadow DOM isdifficult, Polymer has opted tofavor practicality andperformance over correctness. - Polymer
![Page 14: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/14.jpg)
How it Works
Selectors are prepended with elementdescendent selectors.underline { text‐decoration: underline }
... is reformated to:x‐foo .underline { text‐decoration: underline }
![Page 15: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/15.jpg)
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 }
![Page 16: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/16.jpg)
Lower Bound EncapsulationPlatform.ShadowCSS.strictStyling = true;
<span x‐element></span>
![Page 17: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/17.jpg)
Polyfill Limitations
Full style encapsulation
:host() supports one level of functionalarguments
![Page 18: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/18.jpg)
Paper Elements
![Page 19: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/19.jpg)
Style the Paper Slider
<paper‐slider value="10"></paper‐slider>
![Page 20: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/20.jpg)
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;}
![Page 21: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/21.jpg)
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.
![Page 22: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/22.jpg)
Style the Paper Inputpaper‐input { width: 90%;}paper‐input /deep/ .cursor,paper‐input /deep/ .focused‐underline { background‐color: #784880;}
![Page 23: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/23.jpg)
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 <slideshow> and <slidecontent>using Web Component Slides.
![Page 24: CSS and Polymer](https://reader033.fdocuments.us/reader033/viewer/2022052911/559e6e4b1a28ab8e318b4586/html5/thumbnails/24.jpg)