-

, , - . - HTML ( ), UI, , .

- - , , , .

• : API- JavaScript, , .
• Shadow DOM: API- JavaScript DOM , DOM , . , , , .
• HTML templates: <template> <slot> , . .

- :

1. , -, ECMAScript 2015 ( . ).
2. CustomElementRegistry.define(), , , , , , , .
3. DOM Element.attachShadow(). , .. DOM, DOM.
4. HTML template, <template> <slot>. DOM, DOM.
5. , , , HTML.

, , -, .

shadow DOM

, DOM, , DOM , DOM, .

, , HTML <template> <slot>, -.

CustomElementRegistry

, , CustomElementRegistry.define(), , .

Window.customElements

CustomElementRegistry.

-, , :

• connectedCallback: , DOM .
• disconnectedCallback: , DOM .
• adoptedCallback: , .
• attributeChangedCallback: , .

• HTML is: , HTML .
• is Document.createElement(): HTML-, .

CSS

, :

• :defined: , , CustomElementRegistry.define().
• :host: DOM, CSS, .
• :host(): DOM, CSS, ( DOM) - , , .
• :host-context(): DOM, CSS, ( DOM) - , , (-) , DOM.

CSS

, :

• ::part: , part.

Shadow DOM

ShadowRoot

DOM.

DocumentOrShadowRoot

, , .

Element

Element, DOM:

• Element.attachShadow() DOM .
• Element.shadowRoot , , null, .

Node

Node, DOM:

• Node.getRootNode() , , .
• Node.isConnected , , ( ) , Document DOM ShadowRoot DOM.

Event

Event, DOM:

• Event.composed: Boolean, , DOM DOM (true) (false).
• Event.composedPath: (, ). , ShadowRoot.mode.

HTML templates

<template>

HTML, , JavaScript, . DOM - HTMLTemplateElement.

<slot>

-, , DOM . DOM - HTMLSlotElement.

HTML slot

DOM.

Slotable

, Element, Text, , <slot>. , Slotable.assignedSlot, , .

Element extensions

Element, :

• Element.slot: DOM, .

CSS

, :

• ::slotted: , .

slotchange

HTMLSlotElement ( <slot>) (-), .

GitHub -. .

Specification
HTML # the-template-element
DOM # interface-shadowroot

html.elements.template

api.ShadowRoot

• webcomponents.org - -, .
• FAST - -, Microsoft, . Fast Element - , -. Fast Foundation - , -, fast-element, -.
• Hybrids - - , class this . API .
• Polymer - - Google - , . -.
• Snuggsi - - ~ 1 , - , , HTML, CSS JavaScript .
• Slim.js - - - ; , -.
• Stencil - -.