Web Components - October 2019

Introduction and State of the Art

Transcript

1. Web Components Introduction and State of the Art By WebComponents.dev team October 2019
2. What are Web Components ? [Web Components] enable us to create truly encapsulated bits of UI that can be wrapped up in a single tag and dropped onto a page easily without fear of conflicting with elements and style on the rest of your page - Ben Farrell
3. What are Web Components? Custom Elements specs HTML Templates specs Shadow DOM specs
4. Custom Element
5. Shadow DOM
6. HTML Template
7. How to write Web Components? • Native Custom Element • With Libraries • With Compilers → Custom Element • With Wrappers to Custom Element
8. Native Custom Element class MyElement extends HTMLElement { static get observedAttributes() {} attributeChangedCallback(attr, old, new) {} connectedCallback() {} disconnectedCallback() {} adoptedCallback() {} }
9. Libraries and Compilers
10. Wrappers to Custom-Elements You can wrap your existing components or apps into custom-elements. angular-element react-to-webcompt preact-element vue-custom-element
11. Hands-on
12. Browser compatibility ? NATIVE SUPPORT Firefox 63+ october 2018 Chrome 67+ may 2018 Safari 10+ mars 2017 Edge 76+ (chromium based) Details on can i use WITH POLYFIL IE11+, Edge All older browsers Polyfill @webcomponentsjs
13. Where is it used ? • YouTube • GitHub repositories • Salesforce lwc • SAP openui5 • Oracle OracleJET • Apple Music (web) ionic • Nuxeo • Ionic • Vaadin ...
14. How to package Web Components? • ESModule ESNext for bundlers • ESModule ES6 for <script type=”module”> on modern browsers • IIFE for <script> on older browsers
15. How to use Web Components? // ES6 Module way <script type=”module”> import MyComponent from “@firm/my-component”; customElements.define(“my-component”, MyComponent); </script> // HTML <my-component bar=”foo”></my-component>
16. Can I use Web Components with my framework? Can be used everywhere! Full support will require bindings for attributes, properties and CustomEvents. See custom-elements-everywhere.com for details.
17. What is coming up? • Scoped Custom Element Registry proposal • CSS Modules proposal • Constructable Stylesheets w3c • CSS Shadow parts w3c
18. Latest noteworthy • 22 / 09 / 2019 - Why Web Components now? Ben Farrell • 17 / 09 / 2019 - W3C Web Components Meeting Minutes • 23 / 07 / 2019 - Web Components for Enterprise - Part 2 • 02 / 07 / 2019 - Web Components for Enterprise - Part 1
19. Web Components transcend apps and frameworks
20. Good Links • developers.google.com /web components • open-wc.org • awesome-list mateusortiz • webcomponents.dev (obviously )
21. Thanks! webcomponents.dev @webcomp_dev Photo by Esther Jiao on Unsplash Brought to you by Google Slides available at webcomponents.dev/blog