![Standardized Leaf Components (e.g. in React)
const { Component } = React;
class MyComponent extends Component {
render() {
const { active } = this.props;
return (
<my-leaf-component active={ active }>
</my-leaf-component>
);
}
}
class MyLeafComponent extends HTMLElement {
static get observedAttributes() {
return [ 'active' ];
}
}
customElements.define(
'my-leaf-component',
MyLeafComponent
);](https://image.slidesharecdn.com/2019-06leveragingthepowerofcustomelementsingutenbergwordcampeurope-190626124213/85/Leveraging-the-Power-of-Custom-Elements-in-Gutenberg-23-320.jpg)
![Source: https://softwareengineeringdaily.com/2018/10/22/google-javascript-with-malte-ubl/
Many frameworks are modeled around some notion of
components. [...]
So there's one thing that I am very sure of,
which is that we will see Web Components as the basically
only technology used for what I would call leaf components.
Malte Ubl
“
”Tech Lead of the AMP Project](https://image.slidesharecdn.com/2019-06leveragingthepowerofcustomelementsingutenbergwordcampeurope-190626124213/85/Leveraging-the-Power-of-Custom-Elements-in-Gutenberg-27-320.jpg)
Ad
More Related Content
What's hot (18)
Similar to Leveraging the Power of Custom Elements in Gutenberg (20)
Ad
Recently uploaded (19)
Ad
Leveraging the Power of Custom Elements in Gutenberg
- 1. Felix Arntz / WordCamp Europe 2019 Leveraging the Power of
- 2. Pillars of Delightful Content Experiences SecurePerformant Integrated Engaging
- 3. 1998 2000 2002 2004 2006 2008 2010 2012 2014 2016 2018 2020 XMLHttpRequest ES5 HTML5 HTML4 GraphQL CSS2 XML-RPC Server Timing Web Workers Reporting API Service Workers Web App Manifest WAI-ARIA Feature Policy CSS4 ES10 ES7 Custom Elements ES9 CSS Shadow Parts WebAssembly Intersection Obs. NEL Shadow DOM Media Queries CSS3 REST ES3 XHTML 1.0 Evolution of the Open Web * * This is just a very small sample.
- 6. Components to the Rescue Header Logo Responsive hero image Ad Article Image Headline Button Button
- 7. Component-based Frameworks React Vue Angular and many more...
- 8. Benefits of a Component-based Approach MaintainabilityReusability Encapsulation
- 10. Component-based Frameworks React Vue Angular and many more...
- 11. Problem: Fragmentation Reinventing the Wheel Lack of interoperability Separated Communities
- 14. Web Components are a standardized set of browser APIs that allow you to define your own HTML tags, reusable and self-contained.
- 15. Benefits of Web Components Improved Maintainability Improved Reusability Improved Encapsulation Standardization
- 16. Shadow DOM Allows style and markup to be encapsulated from the regular DOM. Custom Elements Allows developers to define their own HTML tags. HTML Templates Allows to place markup in a page that is only parsed once necessary. Key Web APIs
- 17. class Tab extends HTMLElement { constructor() { super(); this.attachShadow( { mode: 'open' } ); this.shadowRoot.innerHTML = ` <style> /* scoped styles */ </style> <slot></slot> `; } static get observedAttributes() { // Return list of attributes to watch. } attributeChangedCallback( name, oldValue, newValue ) { // Run functionality when one of these attributes is changed. } connectedCallback() { // Run functionality when an instance of this element is inserted into the DOM. } disconnectedCallback() { // Run functionality when an instance of this element is removed from the DOM. } } customElements.define( 'my-tab', Tab );
- 18. Current Browser Support See full browser support caniuse.com/#feat=custom-elementsv1 caniuse.com/#feat=shadowdomv1 caniuse.com/#feat=template Also, check out the polyfill! (github.com/webcomponents/custom-elements)
- 19. Interested in a technical deep dive? ● https://developers.google.com/web/fundamentals/web-components/customelements ● https://developers.google.com/web/fundamentals/web-components/shadowdom ● https://developers.google.com/web/fundamentals/web-components/best-practices https://youtu.be/tIAhDR5ohnc?t=7661
- 22. Bye bye, component-based frameworks?
- 23. Standardized Leaf Components (e.g. in React) const { Component } = React; class MyComponent extends Component { render() { const { active } = this.props; return ( <my-leaf-component active={ active }> </my-leaf-component> ); } } class MyLeafComponent extends HTMLElement { static get observedAttributes() { return [ 'active' ]; } } customElements.define( 'my-leaf-component', MyLeafComponent );
- 24. Custom Elements as Blocks?
- 27. Source: https://softwareengineeringdaily.com/2018/10/22/google-javascript-with-malte-ubl/ Many frameworks are modeled around some notion of components. [...] So there's one thing that I am very sure of, which is that we will see Web Components as the basically only technology used for what I would call leaf components. Malte Ubl “ ”Tech Lead of the AMP Project
- 28. Web Components ❤ Application Frameworks!
- 29. https://amp.dev https://amp-wp.org Web Components in Frameworks today
- 30. AMP Components
- 32. AMP Components in Gutenberg
- 33. Get Started with Web Components LitElement Following Best Practices Web Components Learning The Basics AMP Framework Reviewing Examples Gutenberg Building Blocks
- 34. Further Resources ● https://www.webcomponents.org ● https://lit-element.polymer-project.org ● https://amp.dev ● https://github.com/felixarntz/web-components-in-gutenberg
- 35. Proprietary + Confidential Thank You Felix Arntz @felixarntz