![SHADOW DOM
“The Shadow DOM API is a key part of
this, providing a way to attach a
hidden separated DOM to an
element.”
“[This provides the ability] to keep the
markup structure, style, and behavior
hidden and separate from other code
on the page so that different parts do
not clash, and the code can be kept
nice and clean.” - MDN](https://image.slidesharecdn.com/webcomponentsworkshop-230508210242-8e34e230/85/web_components_workshop-pptx-16-320.jpg)
web_components_workshop.pptx
- 1. 6.53 BUILDING A WEB COMPONENT LIBRARY Burton Smith @stuffbreaker burton@breakstuff.io https://github.com/break-stuff/web-components-workshop
- 7. WEB COMPONENTS “Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.” - MDN
- 8. Partner Center Harmony Component Library
- 9. Platform 1 Platform 2 Platform 3 Harmony Component Library
- 10. Application 1 (Vue.js v1) Application 2 (Vue.js v2) Application 2 (Vue.js v3)
- 13. WHY NOT WEB COMPONENTS? 7/1/20XX 13 Pitch deck title • SSR • SEO • Requires JavaScript • Browser Spec Adoption • Forms • Legacy Browsers • Steep Learning Curve • Component Scoping
- 15. CUSTOM ELEMENTS “The ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.” - MDN
- 16. SHADOW DOM “The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element.” “[This provides the ability] to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean.” - MDN
- 17. The Anatomy of the Shadow DOM
- 18. HTML TEMPLATES “The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.” - MDN
- 19. HTML Templates
- 22. Libraries for Web Components lit FAST
- 23. Compilers for Web Components Stencil Solid Svelte
- 24. Frameworks for Web Components Angular Elements Preact Vue.js
- 26. WHAT WE WILL COVER 7/1/20XX 26 Pitch deck title • Composing Web Components • Passing Data to Web Components • Getting Data Out of Components • Styling Web Components • Managing behavior and state
- 28. THANK YOU Burton Smith @stuffbreaker burton@breakstuff.io 7/1/20XX Pitch deck title 28