HTML UI

3

JavaScript API

DOM

DOM JavaScript API DOM DOM

HTML

<template> <slot>

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

DOM

DOM DOM DOM

<template> <slot> HTML

CustomElementRegistry

CustomElementRegistry.define()

Window.customElements

CustomElementRegistry

connectedCallback()

DOM

disconnectedCallback()

DOM

adoptedCallback()

attributeChangedCallback()

is HTML

HTML

Document.createElement() "is"

HTML

CSS

:defined

CustomElementRegistry.define()

:host

CSS DOM

:host()

CSS DOM DOM

:host-context()

CSS DOM DOM DOM

:state()

CustomStateSet

CSS

::part

part

DOM

ShadowRoot

DOM

Element

DOM Element

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

Node

DOM Node

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

Event

DOM Event

Event.composed

DOM DOM true false

Event.composedPath

ShadowRoot.mode closed

HTML

<template>

HTML JavaScript DOM HTMLTemplateElement

<slot>

DOM DOM HTMLSlotElement

slot HTML

DOM

Element.assignedSlot

<slot>

Text.assignedSlot

<slot>

Element

Element

Element.slot

DOM

CSS

::slotted

slotchange

HTMLSlotElement (<slot> )

web-components-examples GitHub

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

html.elements.template

api.ShadowRoot