WebComponents or shadow side of the Doom

WebComponents or shadow side of the Doom

Transcript

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