5. Benefits of Web Components
MaintainabilityReusability Encapsulation Standardization
6. React vs. Vue vs. Web Components
React Vue Web Components
const { Component } = React;
class MyComponent extends
Component {
…
}
Vue.component(
‘my-component’, {
…
}
);
class MyComponent extends
HTMLElement {
…
}
customElements.define(
‘my-component’,
MyComponent
);
<MyComponent></MyComponent> <my-component></my-component> <my-component></my-component>
JSX (pre-processing required) HTML templates HTML templates
Framework Framework Standard
Key Takeaway: This is an unfair and false comparison.
7. Standardized Leaf Components
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 is() {
return 'my-leaf-component';
}
static get observedAttributes() {
return [ 'active' ];
}
}
customElements.define(
MyLeafComponent.is,
MyLeafComponent
);
React ❤ Web Components!
10. 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
11. 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)
17. The Custom Elements API
1. Create a class that extends HTMLElement
2. Implement the element’s behavior and style in that class
3. Register the element with
customElements.define( tagName, elementClass )
25. What is the Shadow DOM?
● In addition to regular DOM node children, an element can have a
separate shadow tree attached to it.
● The element the shadow tree is attached to is called the shadow host.
● The document fragment attached to the shadow host is called the
shadow root.
● Elements in the shadow tree are scoped to the shadow host element and
cannot be accessed from the outside.
26. Example: The Built-in Range Input
Shadow trees have been used for quite a while by browsers already!
