WebComponents: Native Komponenten fürs Web - ohne und mit Frameworks

Web Components: 
Native Komponenten für’s Web
Ohne und mit Framework
Manuel Rauber
@ManuelRauber
Consultants
Patrick Jahr
@jahr_patrick
Developer

View Slide

Manuel Rauber
Speakers
Patrick Jahr
[email protected]
@jahr_patrick
[email protected]
@manuelrauber
https://manuel-rauber.com
Microsoft MVP

View Slide

• The challenge
• Web Components
• What are they?
• How to use them?
• How to create them?
• Take Care & a peek into the future
• What about frameworks?!
• Micro Frontends
Agenda

View Slide

The challenge

View Slide

The challenge
https://dribbble.com/shots/7169781-Homestay-Web-Design https://dribbble.com/shots/7164322-Food-delivery-Landing-page-design

View Slide

DRY

View Slide

Components
Components
Components
Components

View Slide

View Slide

!"div>

View Slide

!"div>

!"script> !"head> <body> !"body> !"html> • No semantic • Intransparent • Change are difﬁcult • Framework dependent 

View Slide

!"script> !"head> <body> !"body> !"html> !"span> <button id="incButton">+!"button> <button id="decButton"!#!"button> !"div> • Global Scoping • Naming conﬂicts • Styling conﬂicts 

View Slide

!"my-counter>

!"script> !"head> <body> !"body> !"html> • Semantic • Local Scoping • Conﬁguration • Bundle Import 

View Slide

Web Components

View Slide

• Web Components are not a standard, but a collection of 3 technologies
• Custom Elements
• HTML templates
• Shadow DOM
• (HTML Imports)
• Bring a native component model to web instead of having to use frameworks
Web Components - What are they?

View Slide

Can I use - Custom Elements?

View Slide

Can I use - Shadow DOM?

View Slide

Can I use - HTML templates?

View Slide

Custom Elements

View Slide

• Create your own HTML tags
• Lifecycle model (“connected”, “disconnected”, “attribute changed”, “adopted”)
• Reusable
• Decouple behavior from the document
Custom Elements
!"my-rating>

View Slide

• ES6 Class
• Inherit from HTMLElement 
or any other HTML element
• Need to be deﬁned in a  
CustomElementRegistry
Custom Elements class MyRating extends HTMLElement {
constructor() {
super();
console.log('component constructed');
}
connectedCallback() {
console.log('component added to DOM');
}
adoptedCallback() {
console.log('component was moved in DOM');
}
disconnectedCallback() {
console.log('component removed from DOM');
}
attributeChangedCallback(name, oldVal, newVal) {
console.log('a attribute has been changed');
}
}
window.customElements.define('my-rating', MyRating);
const myRating =
document.createElement('my-rating');
document.body.appendChild(myRating);
!% this moves the node!
otherElement.appendChild(myRating);
otherElement.removeChild(myRating);

View Slide

• Static getter observedAttributes 
returns all attributes which 
should be observed
• All those attributes will trigger 
attributeChangedCallback 
upon a change
• Does not execute on property 
change!
Custom Elements - Observed Attributes
class MyRating extends HTMLElement {
constructor() {
super();
}
static get observedAttributes() {
return [ 'value' ];
}
attributeChangedCallback(name, oldVal, newVal) {
if (name !!& 'value') {
this.innerHTML = `Rating value ${newVal}`;
}
}
}
!"my-rating>

View Slide

HTML Templates

View Slide

• HTML tag:
• Parsed, but not rendered
• Instantiated via JavaScript
HTML Templates

My Image Card!"header>
Description!"p>
!"template>
const template = document.querySelector('template');
const templateInstance = document.importNode(template.content, true);
const img = templateInstance.querySelector('img');
img.setAttribute('src', 'http:!%a-link.com/foo.png');
document.body.appendChild(templateInstance);

View Slide

Shadow DOM

View Slide

• Encapsulates HTML and CSS
• Isolated DOM: elements within Shadow DOM are not selectable from outside
• e.g. document.querySelector() won’t return a result
• Scoped CSS: CSS styles stay within Shadow DOM, no leakage, no bleed-in
• Composition: declarative, markup-based API, put elements from outside in
• Simpliﬁes CSS: no conﬂicts with existing classes and IDs
• Productivity: app consists of chunks of components instead of one big page
Shadow DOM
https://developers.google.com/web/fundamentals/web-components/shadowdom

View Slide

• Shadow host 
DOM node that the  
shadow DOM is attached to
• Shadow tree 
DOM tree inside shadow DOM
• Shadow boundary 
Place where the shadow DOM 
ends and the regular DOM begins (“Light DOM”)
• Shadow root 
Root node of the shadow tree 
Shadow DOM
document
shadow
host
Document Tree
Shadow Tree
shadow
root
Shadow boundary

View Slide

• attachShadow() attaches a shadow DOM to any HTML element
• open and closed mode
Shadow DOM

!"head>

!"div>
 const shadowHost = document.querySelector('div'); const shadowRoot = shadowHost.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = '<h1>Hello World!!"h1>'; !"script> !"body> !"html> 

View Slide

• open allows access to the HTML element’s shadow DOM
• closed does not allow access to the HTML element’s shadow DOM
Shadow DOM
!% !!'
shadowHost.attachShadow({ mode: 'open' });
document.querySelector('div').shadowRoot.querySelector('h1');
!% !) [HTMLHeadingElement]
!% !!'
shadowHost.attachShadow({ mode: 'closed '});
document.querySelector('div').shadowRoot.querySelector('h1');
!% !) Can not read 'querySelector' of null

View Slide

• A (named) placeholder  
to ﬁll with your own  
markup
• Basically mixes together  
two DOM trees:  
the shadow & light tree
Shadow DOM - Slots

 :host { border: 1px solid black; display: block; } !"style> <div> <slot>!"slot> <slot name="another-slot">With Default Content!"slot> !"div> !"template> <my-element>!"my-element> !!!* No slot filled !!+ <my-element> <div>Unnamed Slot Content!"div> !"my-element> <my-element> <div>Unnamed Slot Content 2!"div> <div slot="another-slot">Another Slot Content!"div> !"my-element> 

View Slide

• Slots emit an event, whenever its content changes: slotchange
• Get the slotted elements via assignedNodes()
• https://drafts.csswg.org/css-scoping/#slotted-pseudo
Shadow DOM - Slots
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', () !, {
const assignedNodes = slot.assignedNodes();
!% Do something with assignedNodes
});

View Slide

• Styling is done via -tags • All stylings are local and do not overwrite styles from other shadow DOMs • No other stylings will bleed into the shadow DOM Shadow DOM - Styling <template> <style> h1 { color: red; } !"style> <h1>Hello World!!"h1> !"template> const shadowRoot = document.querySelector('div') .attachShadow({ mode: 'open' }); shadowRoot.innerHTML = '<h1>Hello World!!"h1>' + '<style>h1 { color: red; }!"style>'; 

View Slide

• Inside shadow DOM
• :host, :host(), :host-context(), ::slotted()
• Outside shadow DOM
• CSS Shadow Parts: ::part()
• In Discussion: ::theme()
• Deprecated: >>> (“shadow piercing”)
Shadow DOM - CSS Selectors

View Slide

• :host: Selects the shadow host element
Shadow DOM - CSS Selectors - Inside Shadow DOM
document
shadow
host
Document Tree
Shadow Tree
shadow
root
Shadow boundary
!"div>

View Slide

• :host(): Selects the shadow host element only, if it has a certain class
document
shadow
host
Document Tree
Shadow Tree
shadow
root
Shadow boundary
!"div>

View Slide

• :host-context(): Selects the shadow host  
element only, if the selector given as the  
function's parameter matches the shadow  
host's ancestor(s) in the place it sits inside  
the DOM hierarchy
document
shadow
host
Document Tree
Shadow Tree
shadow
root
Shadow boundary

!"div>
!"body>

View Slide

• :host-context(): Selects the shadow host  
element only, if the selector given as the  
function's parameter matches the shadow  
host's ancestor(s) in the place it sits inside  
the DOM hierarchy
• "#slotted(): Selects a slotted element  
if it matches the selector
document
shadow
host
Document Tree
Shadow Tree
shadow
root
Shadow boundary
!"div>

!-slotted(div) {} !"style> <slot name="my-slot">!"slot> !"template> 

View Slide

:host { display: block; background-color: blue; } :host(.red) { background-color: red; } :host-context(main) { background-color: yellow; } !-slotted(article) { background-color: black; } !"style> <div> Before slot!"p> <slot>Default Slot content!"slot> After slot!"p> !"div> !"template> <my-element>!"my-element> <my-element class="red">!"my-element> <main> <my-element>!"my-element> !"main> <my-element> <article> Article Content !"article> !"my-element> 

View Slide

• CSS Shadow Parts (Working Draft): "#part()
• Allows to selectively expose elements from the shadow tree to the
outside page for styling purposes
• https://www.w3.org/TR/css-shadow-parts-1/
• CSS Shadow Parts (Unofﬁcial Draft): "#theme()
• Matches all given parts, no matter how deeply nested they are
• http://tabatkins.github.io/specs/css-shadow-parts/#part-theme
Shadow DOM - CSS Selectors - Outside Shadow DOM

View Slide

• Allows to selectively expose 
elements from the shadow tree to  
the outside page for styling  
purposes
Shadow DOM - CSS Selectors - Outside Shadow DOM - ::part

 header { background-color: crimson; } !"style> <div> <header part="my-header">Style me!"header> !"div> !"template> <style> my-element.styled!-part(my-header) { background-color: black; color: white; } !"style> <my-element>!"my-element> <my-element class="styled">!"my-element> 

View Slide

• If a nested Web Component  
will expose an inner Web  
Component’s part, it has to  
use exportparts=“part1 part2 …” 
instead of part=“name”
Shadow DOM - CSS Selectors - Outside Shadow DOM - ::part
 my-element!-part(textspan) { color: red; } !"style> <template id="my-element-outer-template"> <my-element-inner exportparts="innerspan textspan”> !"my-element-inner> !"template> <template id="my-element-inner-template"> Innerspan!"span> Textspan!"span> !"template> <my-element>!"my-element> 

View Slide

Constructable Stylesheets

View Slide

• W3C: “A collection of interesting ideas”
• Currently, styling must be speciﬁed in each shadow DOM
• As we know, current web pages have hundreds and thousands CSS styles
• Long parsing time and memory costs!
• But most Web Components (or at least within a component library) will use
the same/shared stylings
• However, component libraries may update CSS during runtime, which may
thwart style sheet sharing
• API allows to create, remove, update, replace style sheet rules
Constructable Stylesheets - Motivation

View Slide

Constructable Stylesheets - Demo Code
const myElementSheet = new CSSStyleSheet();
class MyElement extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.adoptedStyleSheets = [myElementSheet];
}
connectedCallback() {
!% Only actually parse the stylesheet when the first instance is connected.
if (myElementSheet.cssRules.length !. 0) {
myElementSheet.replaceSync(styleText);
}
}
}
https://wicg.github.io/construct-stylesheets/

View Slide

Importing Web Components

View Slide

• ES6 Import
• Via Code
• Deprecated: HTML Import
Importing Web Components

!"script> !% static import import './my-element.js'; !% dynamic import import('./my-element.js') .then(!!'); !% or lazy-loading via const script = document.createElement('script'); script.src = './my-element.js'; document.body.appendChild(script); const myElement = document.createElement('my-element'); document.body.appendChild(myElement); 

View Slide


View Slide

• Window global registry for all custom elements
• API
• define(): defines a new element
• get(): returns the constructor of an element (or undefined)
• whenDefined(): returns a promise which is fulfilled, when the custom
element is available
• upgrade(): upgrades an element before it is connected to its shadow
root

View Slide

Take Care!
A sneak peek into the future

View Slide

Versioning
My library A
My library B
3rd party
library
1.0
3rd party
library
2.0
Application

deﬁnes
deﬁnes
Uncaught DOMException: Failed to execute ‘define’ on
‘CustomElementRegistry’: the name “my-web-component”
has already been used with this registry.

View Slide

• Problem: Custom Element Registry is a window global object
• Possible solution currently discussed by W3C
• Scoped Custom Element Registry
• https://github.com/w3c/webcomponents/issues/716
• Current usable solutions
• Version your HTML tags
• The host application is the only one loading WCs, even 3rd-party, but this
could break other Web Components expecting a certain version
Versioning

View Slide

• If you wish to sync them, then you’ll need to sync them!
• “Reﬂecting properties to attributes” or “Reﬂected DOM Attributes”
• Helps to keep DOM representation in sync with its JavaScript state
• Watch out! Properties can hold objects, numbers etc. Attributes only strings
•
Attributes vs Properties
input = document.createElement('input');
console.log(input.getAttribute('value')); !% null
input.value = 'one';
console.log(input.getAttribute('value')); !% null
input.setAttribute('value', 'two');
console.log(input.value); !% one

View Slide

• Shadow DOM encapsulates the DOM only
• JavaScript is still global scoped
• Use common techniques for scoping JavaScript
• May use the global scope to your advantage for app-wide conﬁgurations
• But global polyﬁlls can cause problems (e.g. if you load zone.js twice)
JavaScript is still global scoped

View Slide

• Easy things may require more code
• Attributes vs Properties
• addEventListener etc.
• Bigger component libraries need a strong foundation
• Think of when and how to render your component
• There is no virtual DOM like in React or Angular
• You may need to think of partial DOM updates for bigger components
Boilerplate & render loops

View Slide

• There is no built-in template engine, you may be used to from SPA
frameworks like Angular, React, Vue etc.
• JavaScript template strings are preferred for better readability
• Can get complex and unreadable when conditions are used heavily
No built-in template engine

View Slide

No built-in template engine - Lit Element example
get previewTemplate() {
return html`

${this.preview.image
? html`: html``
}

${this.preview.title}!"header>
${this.preview.description
? html`${this.preview.description}!"p>`
: html``
}
!"div>
!"div>
`;
}

View Slide

• Currently there is no auto completion support for Web Components
• Stencil tries to solve this by generating TypeScript Definition files
• VS Code & W3C are discussing possible solutions
• Stencil is currently generating a possible solution with its compiler
Editor support // type definitions

View Slide

• There is no standard build process
• You can use any tool you want, e.g. webpack, parcel, etc.
• Be aware:
• CSS post processing
• Asset management
Build process // custom asset management

View Slide

• Forms and Web Components don’t play well yet
• FormData is not populated
• does not work
• Form Participation API aka “Form Attached Controls” is discussion
• https://github.com/github/image-crop-element/pull/15
• https://github.com/axa-ch/patterns-library/issues/1258
Form Participation API

View Slide

• Elements can not escape their stacking context
• Highly needed for (modal) dialogs, tooltips, right-click menus, select, …
• Current element does not ﬁt for all use cases
• Possible workaround: API in the shell
Stacking UI

!!!* Will be transformed, but should be a top layer modal dialog !!+
!"my-modal-dialog>
!"my-wc-a>
!"my-wc-b>
!"body>

View Slide

• Already good possibilities to create framework-independent components
• Decide between view-only and data-controlling Web Components
• Keep in mind, what is not working yet, but will come in the future
• Leverage the shadow DOM to encapsulate your Web Components
• Think of your Web Components API!
Web Components - Summary

View Slide

What about frameworks?!

View Slide

• Web Components are an uprising good alternative to build frontends
without frameworks involved
• But! A lot of stuff is done easier with frameworks, e.g. Form Validation, State
Handling, Data Management, CSS post processing
• Why not wrap framework components into Web Components?
• Angular: Angular Elements, @angular/elements
• React: Wrap manually or use a community wrapper
• Vue: Vue Web Components, @vue/web-components
What about frameworks?!

View Slide

• Bundle sizes per framework is quite high for small components
• Possible long loading and parsing times
• A solution could be:
• Bundle Web Components without their framework
• Load the framework in the hosting application
• Watch out! All Web Components have to use the same framework version
• Will get better over time with less and less framework involved
• or frameworks compile to much smaller bundle sizes (e.g. Angular Ivy)
What about frameworks?! - Bundle Sizes

View Slide

• Angular Ivy could be used for creating Web Components
• … as long as you don’t consume other Web Components!
• Ivy will complain about other Web Components not knowing about
properties and throw an exception during compilation time 
 
 
• Be aware, that Ivy is not yet production ready!
• Think of removing zone.js and handle everything OnPush
What about frameworks?! - Angular
Property ‘propertyName' does not exist on type 'HTMLElement'.

View Slide

DEMO

View Slide

Micro Frontends

View Slide

Micro Frontends
Feature A
Feature B
Application
Web API
Web API
UI
UI

View Slide

• Web Component != Micro Frontend
• A Micro Frontend can be built by multiple Web Components
• The whole Micro Frontend could be wrapped into a Web Component
• Micro Frontend(s) are wrapped into a (SPA) shell
Micro Frontends
https://example.com
Micro Frontend
Dashboard (SPA) Shell

View Slide

• Eager Loading
• Server-side composition
• Build-time integration
• Lazy Loading
• iFrames
• JavaScript
• Web Components
Micro Frontends - Composition

View Slide

• “Does this approach ﬁt my company structure?”
• SPA-Shell API depending on the composition approach
• Data exchange / Data API
• Routing
• A single Micro Frontend routing is easy
• A multi Micro Frontend routing is complex
• Let the user F5 your application!
• Routing is also a possibility for data exchange
Micro Frontends - Challenges

View Slide

Micro Frontends - Challenges
https://example.com?mf1=/customer/1&mf2=balance/1
Micro Frontend 1 Micro Frontend 2
Dashboard

View Slide

• Interesting possibility to have small customized UIs per feature
• Think of how you’ll compose Micro Frontends (Micro Frontend Architecture)
• Think of data exchange in Micro Frontends (if needed)
• Think of single or multi routing possibilities (let the user F5 your app!)
• Good for decoupling teams!
Micro Frontends - Summary

View Slide

Conclusion

View Slide

• Web Components help in giving a semantic structure in apps
• They encapsulate HTML and CSS
• Improves maintainability and reusability
• Take care for stuff not working yet (e.g. Form Participation API)
• SPA Frameworks can help in building Web Components
• … with the odd of having bigger bundles
• Micro Frontends help decouple teams
Web Components - Summary

View Slide

And… now?
• Try it out! Fiddle around with Web Components
• Use them! Include ﬁrst small Web Components into your application
• Be prepared! Keep up to date with the development of Web Components
• Slides: https://speakerdeck.com/manuelrauber
• Repository: https://github.com/thinktecture/angular-days-2019-fall-web-components
• Contact: [email protected], [email protected]

View Slide

WebComponents: Native Komponenten fürs Web - ohne und mit Frameworks

WebComponents: Native Komponenten fürs Web - ohne und mit Frameworks

Manuel Rauber

More Decks by Manuel Rauber

Other Decks in Programming

Featured

Transcript