Web Components
• [Link]
• Create reusable, encapsulated HTML tags to use in web and web apps
• Works in modern browsers: [Link]
• Consists of 3/4 specs:
• Custom Elements (FF 63+, Chrome 67+, (Safari), current Mobile Browser)
• Shadow DOM
• HTML templates
• ES Modules (HTML Imports)
Custom Elements
• [Link]
• JS erweitert HTMLElement (constructor + prototype defined by author instead of user-agent)
• autonomous custom element (neue Elemente, erweitern die abstrakte HTMLElement())
• <flag-icon country="nl"></flag-icon> und <calculator></calculator>
• customized built-in element (erweitert ein natives HTML Element, Semantik bleibt erhalten)
• <button is="custom-Button">
• Ergebnis: Nachteile: Browser, Suchmaschinen, Screenreader etc. erkennen diese nicht.
• Security: ?
// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
[Link]('fancy-tabs', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
// Attach a shadow root to <fancy-tabs>.
const shadowRoot = [Link]({mode: 'open'});
[Link] = ´
<style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
<div id="tabs">...</div>
<div id="panels">...</div>
`;
}
...
});
Shadow DOM
• [Link]
• You can think of shadow DOM as a scoped subtree inside your element to encapsulate DOM &
CSS.
• Ein Element im DOM (shadow host) erhält einen neuen separierten DOM Zweig (shadow root &
shadow tree). Alles was dort eingefügt wird, verhält sich lokal zum shadow host.
• Nicht alle Elemente können als shadow host fungieren (ok: Custom Element, body, div, h1…
h6, main, nav, p, span, ….)
• <textarea>, <input> nutzen bereits ein shadow DOM; <img> macht wenig Sinn.
• Hauptziel: Scoped CSS! CSS Selektoren von ausserhalb erreichen nicht das DOM, CSS Styles von
innen reichen nicht außerhalb. Duie Komponenten können sich also selbst stylen.
• Von aussen kann eine Komponente überschrieben werden. Von innen kann über das :host
selector auch auf events außerhalb reagiert werden.
• Security: ?
// Use custom elements API v1 to register a new HTML tag and define its JS behavior
// using an ES6 class. Every instance of <fancy-tab> will have this same prototype.
[Link]('fancy-tabs', class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
// Attach a shadow root to <fancy-tabs>.
const shadowRoot = [Link]({mode: 'open'});
[Link] = ´
<style>#tabs { ... }</style> <!-- styles are scoped to fancy-tabs! -->
<div id="tabs">...</div>
<div id="panels">...</div>
`;
}
...
});
Shadow DOM: Light DOM vs.
Shadow DOM
• Light DOM: Der Markup aus einem Custom Element. Es sind die “echten” Kindknoten
des Elements.
<better-button>
<!-- the image and span are better-button's light DOM -->
<img src="[Link]" slot="icon">
<span>Settings</span>
</better-button>
• Shadow DOM: Das DOM einer Komponente, lokal zur Komponente. Kapselt CSS
etc.
#shadow-root
<style>...</style>
<slot name="icon"></slot> <!– named slot referenced by name
<span id="wrapper">
<slot>Button</slot> <!– slot with fallback content
</span>
Shadow DOM: Flattened Tree
• Shadow DOM ersetzt normalerweise die Kindknoten, sei denn ein <slot> definiert wo sie gerendert
werden sollen
• Slots sind Platzhalten, welche (User) DOM und Shadow DOM zusammenführen, wenn und wo
gewünscht.
• Slots können auch Fallback Inhalt enthalten, wenn das „light DOM“ keine Inhalte mitgibt.
<better-button>
#shadow-root
<style>...</style>
<slot name="icon">
<img src="[Link]" slot="icon">
</slot>
<span id="wrapper">
<slot>
<span>Settings</span>
</slot>
</span>
</better-button>
Shadow DOM: closed roots
const shadowRoot = [Link]({mode: 'closed'}); // close shadow tree
• Javascript außerhalb kann das DOM in der Komponente nicht erreichen (Browser nutzen dass z.B.
für das video Tag).
• Kein Sicherheitsfeature, da Angreifer immer [Link] angreifen können.
• Auch der eigene Custom Element Code kann nicht mehr auf das shadow DOM zugreifen
HTML templates
• [Link]
• Deklariert HTML Elemente die nicht sofort gerendert werden, aber über Script geklont und
eingefügt werden können. Template Inhalte sind keine Kindknoten im DOM.
• Lösen ein Semantik-Problem von „unsichtbaren“ Content der per Script ein- und ausgeblendet
wird.
ES Module
• [Link]
n-with-the-javascript-module-system
• Inclusion and Reuse of JS documents in web components