Magic of web components

Magic of
Web Components
By Dmitriy Kalnauz
Magic of Web Components
Play
hys-enterprise.com

HYS Enterprise is a Dutch software
development company with more than
200 talented engineers from all over
the world hys-enterprise.com
Ukraine
Netherlands

How I am
● Software Engineer, sometime Full-stack, sometimes .NET,
sometimes frontend @ HYS Enterprise
● 5+ years of experience
● .NET, JS, Angular, React, Vue, Java, Python, AWS

What are we going
to speak about
What are Web Components
Which problems solves
How to use

Style Guide
is a Problem

Service C
Service B
Service A

User Interface
Business Layer
Data Layer
User Interface
Microservice Microservice
Microservice
MONOLITHIC ARCHITECTURE MICROSERVICES ARCHITECTURE

Event Name
User Interface
Microservice Microservice
Microservice
User Interface User Interface

Challenges deep-dive
Challenge 1
Unified and consistent
UI
● Common/shared UI
library
● CSS variables
Challenge 2
Nobody slapping CSS
of another team
● Scope restriction via
selectors
Challenge 3
Framework Agnostic

Event Name
Menu
component
Header
component
Application
component

Button component
Search component
Calendar component
Schedule component
Notification component

Button component
Dropdown component
Search component
Image component
It's Over 9000!

Custom elements Shadow DOM HTML Templates

Custom Elements
class CustomElement extends HTMLElement {
constructor() {
super();
// ..
}
// ..
}
customElements.define('custom-element', CustomElement);
This API allows developers to define their tags (custom element), whose styles are
encapsulated and isolated (shadow dom), that can be restamped many times (template), and
have a consistent way of being integrated into applications (es module).

Lifecycle Callbacks
constructor() {
super();
}
connectedCallback() {}
disconnectedCallback() {}
adoptedCallback() {}
attributeChangedCallback(attrName, oldVal, newVal) {}
}
customElements.define('custom-element', CustomElement);

Customized built-in elements
A customized built-in element, which is defined with an extends option. These types of
custom elements have a local name equal to the value passed in their extends option,
and their defined name is used as the value of the is an attribute, which therefore must
be a valid custom element name.
class PlasticButton extends HTMLButtonElement {
// ..
}
customElements.define("plastic-button", PlasticButton, {extends: "button"});

How to use
<custom-element>Click Me!</custom-element>
document.createElement('custom-element');
<button is="custom-button">Click Me!</button>
document.createElement('button', {is:'custom-button'});
● Autonomous custom element via defined tag
● Customized built-in element use the is attribute on a extended element

Shadow DOM
Shadow DOM introduces scoped styles to the web platform. Without tools or naming
conventions, you can bundle CSS with markup, hide implementation details, and author self-
contained components in vanilla JavaScript.
constructor() {
super();
var div = document.createElement("div");
div.innerHTML = "Hello world";
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(div);
}
}
customElements.define("custom-element", CustomElement);

HTML Template
<template>
<div class="modal">
<style>
:host(my-modal) {display: none;}
.modal{background-color: #fefefe;border: 1px solid #888;}
</style>
<div class="modal-header">
<div class="modal-header__title">
<slot name="header"></slot>
</div>
<div class="icon icon-close" style="position: relative;">×</div>
</div>
<div class="modal-content">
<slot name="content"></slot>
</div>
</div>
</template>
The template element is used to declare fragments of HTML that can be cloned and inserted
in the document by script.

Web Components
➮ Custom Elements
➮ Shadow DOM
➮ HTML Templates
➮ HTML Imports
Chrome
(67+)
Opera
(64+)
Firefox
(63+)
Safari
(Limited 10.1+)
Edge
(Chromium(79+))
Stable Stable Stable Stable Stable
HTML Imports are deprecated and removed

constructor() {
super();
this._shadow = this.attachShadow({
mode: 'open'
});
this._element = document.createElement('component-content');
this._element.innerHTML = this.template;
this._shadow.appendChild(this._element);
}
connectedCallback() {
this._element.className = this._type || 'default';
var element = this.shadowRoot.querySelector('.icon.icon-close')
.addEventListener('click', e => {this.removeComponent();});
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'type') {
this._element.className = newValue;
this._type = newValue;
}
}

removeComponent = () => this.remove();
}
if (!window.customElements.get('alarm-component')) {
customElements.define('alarm-component', AlarmComponent);
}

alarm-component-content{
color: deepskyblue;
font-size: 18px;
}
alarm-component-content::first-letter{
color:fuchsia;
font-size: 32px;
}

Pros and cons
Pros
Portable
Dependencies not required
Style isolated
Long term prospect
Execution speed
Cons
Don't have enough community
support
Not widespread
Low level(DX worse)

Check it out
Material
Polymer elements
UI5 Web Components
PatternFly Elements

Sources & Useful links
GitHub with examples: https://github.com/dkalnauz/web-components
Web Components Google documentation: https://developers.google.com/web/fundamentals/web-components
Web Components site: https://www.webcomponents.org/specs
Contacts: facebook.com
linkedin.com/in /dmitriykalnauz

Thank you
For your attention!
Any Questions?

Magic of web components

More Related Content

What's hot

Similar to Magic of web components

More from HYS Enterprise

Recently uploaded

Magic of web components

Editor's Notes