Originally presented at WordCamp Europe 2019

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.

4. Content Complexity

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

13. Web Components
https://developers.google.com/web/fundamentals/web-components/

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

21. A Solid Foundation
https://lit-element.polymer-project.org

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?

26. https://youtu.be/plt-iH_47GE

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

31. Introducing Bento AMP

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