OWDD Intro To Web Components

An overview of Web Components

Transcript

1. Web Components James McGrath james@jamesmcgrath.net @ameone
2. What are Web Components?
3. <wc-what> </wc-what> A set of features that is currently being added to the HTML (hyper-text markup language) and DOM (document object model) specifications that allows for the creation of reusable components/widgets.
4. <wc-idea> </wc-idea> The idea behind web components • Code reuse • Encapsulation • Separation of Concerns • Composition • Theming • Expressive • Semantics
7. <wc-parts> </wc-parts> Web Components consist of 4 parts Custom Elements HTML Imports Templates Shadow DOM
8. <wc-element> </wc-element> Custom Elements: The ability to create your own tags and elements. These elements can have their own scripted behaviour and CSS styling. *It’s currently possible to create custom tags and style it with css & attach behaviours to it via js. The custom elements for web components have lifecycle callbacks (created, attached, detached, changed).
9. <wc-imports> </wc-imports> HTML Imports <link rel=”import” href=”file.html”> The ability to include and reuse HTML documents in other HTML Documents But is intended to be the packaging mechanism of Web Components
10. <wc-templates> </wc-templates> Templates = THINGS THAT DON’T RENDER A method of declaring inert DOM subtrees in HTML that can be instantiated later via JavaScript <template>...</template>
11. <wc-shadow> </wc-shadow> Shadow DOM Provides encapsulation of CSS, JavaScript and templates in Web Components. Prevents style leakage by setting a boundary DOM Trees
12. How can you make Web Components now? <wc-how> </wc-how> Polymer Bosonic X-TAG JavaScript
13. <wc-support> </wc-support>
14. <wc-examples> </wc-examples> https://github.com/jamcgrath/e-moji-component https://shop.polymer-project.org/ https://rivuu.com/app Web Component Examples
15. <wc-how> </wc-how>