WebComponents or shadow side of the Doom
1 like593 views
This document discusses web component technologies including custom elements, templates, shadow DOM, HTML imports. It provides examples of how to define custom elements and use templates and shadow DOM. It also mentions some web component libraries and resources for further information.
![Shadow DOM
Shadow DOM gives us DOM tree
encapsulation and style boundaries,
but please don't:
!
:host([data-post-status="warning"]) /deep/
#postState /deep/ #submitButton /deep/ core-icon
{ color: #259b24; }](https://image.slidesharecdn.com/webcomponents-2-141117164151-conversion-gate02/85/WebComponents-or-shadow-side-of-the-Doom-10-320.jpg)
WebComponents or shadow side of the Doom
- 1. WebComponents or shadow side of the Doom Grzegorz Wilczyński @wilq_ Wrocław, 17.11.2014
- 2. But Why?
- 3. Four Horsemen Custom Elements HTML Imports Templates Shadow DOM
- 4. Custom Elements <polymer-element name="post-list" extends="post-list-base" attributes="type posts"> <template> </template> </polymer-element>
- 5. Custom Elements <post-list> post list </post-list> ! <post-list posts="{foo: 'bar'}" type="pretty"> post list with attributes </post-list>
- 6. Templates <template repeat="{{post in posts}}"> <post-card> <img src="{{post.avatar}}"> <h2>{{post.username}}</h2> <p>{{post.text}}</p> </post-card> </template>
- 7. Templates <template> <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <content></content> <template>
- 8. Shadow DOM
- 10. Shadow DOM Shadow DOM gives us DOM tree encapsulation and style boundaries, but please don't: ! :host([data-post-status="warning"]) /deep/ #postState /deep/ #submitButton /deep/ core-icon { color: #259b24; }
- 11. HTML Imports <link rel="import" href="foo/bar.html">
- 12. Are We Componentized Yet? X-Tags by Mozilla Polymer by Google Bosonic
- 13. Warehouse Search Bower Packages Component Kitchen Custom Elements
- 14. Sources http://webcomponents.org https://www.polymer-project.org http://pascalprecht.github.io/dont-stop- thinking-about-tomorrow/ http://jonrimmer.github.io/are-we-componentized- yet/
- 15. Thank YOU