This is the 8th day of my participation in the August More Text Challenge
Web Components
Web Components are a different set of technologies that allow you to create reusable custom elements whose functionality is encapsulated outside of your code and use them in your Web applications. Rather than using vue or React frameworks to define components, browsers define components natively
customElements
An overview of the
CustomElements is a read-only property on the Window object, and the interface returns a reference to a CustomElementRegistry object that can be used to register new Custom Elements or to obtain information about previously defined custom elements.
HTMLTemplateElement Content template element
An overview of the
The HTML content template (
) element is a mechanism for holding client-side content that is not rendered when the page loads, but can then be instantiated at run time using JavaScript. Think of a template as a piece of content that can be stored in a document for later use. While the parser does process the contents of the
element when loading the page, it does so only to ensure that the contents are valid; But the element content is not rendered.
Commonly used attributes
The content of the segments of content from DocumentFragment element Through the document. CreateDocumentFragment create elements fragments (),
<! -- Define template fragment -->
<template id="element-template">
<div>test-template</div>
</template>
<script>
/* Get the template fragment */
const ele = document.getElementById('element-template')
ele.content instanceof DocumentFragment //true
/* Create HTML fragments with createDocumentFragment */
const div = document.createDocumentFragment('div')
div instanceof DocumentFragment //true
/ * * /
// The template defined on the HTML gets its content equivalent to the HTML fragment created through createDocumentFragment
</script>
Copy the codeShadowRoot
An overview of the
The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from the main DOM tree of the document.
You can retrieve an Element’s reference by using its element.shadowroot property, assuming it was created by element.attachShadow () and setting mode to open.
Mount the shadow DOM via element.attachShadow ()
Complete demo code
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
</head>
<body>
<test-shadow-root></test-shadow-root>
<template id="temEle">
<style>
.main{
color: #f00;
}
</style>
<div class="main">I'm the Template fragment<! -- Use slot -->
<slot name="header"></slot>
</div>
</template>
<test-template-ele>
<! -- Define slot -->
<style>
.slot{
color: rgb(87.28.223);
}
</style>
<div class="slot" slot="header">I am a slot.</div>
</test-template-ele>
<! -- Life cycle tests -->
<div id="moveDiv">
<button id="add">add</button>
<button id="update">update</button>
<button id="move">mobile</button>
<button id="remove">delete</button>
</div>
<! -- Mount from IS -->
<div is="test-is-com">
<div>AAA</div>
</div>
<script>
/* Custom web-components */
customElements.define('test-shadow-root'.class extends HTMLElement {
/* When the test-shadow-root component is mounted to the DOM, the constructor */ is executed
constructor() {
super(a)const shadowRoot = this.attachShadow({mode: 'open'}) // Mount the shadow DOM to the specified element
When this.attachShadow() is invoked, shadowRoot is mounted in the constructor and can be accessed through this
// The mode open shadow root element can be accessed from outside js
// mode closed denies access to the closed shadow root node from outside js
// console.log(' execute ', this)
const div = document.createElement('div')
div.textContent = 'I'm the content of div'
// shadowRoot.appendChild()
// console.log('this', this.shadowRoot)
shadowRoot.appendChild(div)
// this.shadowRoot === shadowRoot true}})/* Use template to customize HTMLTemplateElement */
customElements.define('test-template-ele'.class extends HTMLElement {
constructor() {
super(a)const temEle = document.querySelector('#temEle')
const templateContent = temEle.content // Get the HTML snippet
// console.log('AA', templateContent instanceof DocumentFragment) //true
// templateContent
// Create a shadow DOM to mount the template fragment
const shadowRoot = this.attachShadow({mode: 'open'})
// console.log('shadowRoot', shadowRoot)
shadowRoot.appendChild(templateContent)
}
})
/* Create web- components with JS, test life cycle functions */
class LifeCycle extends HTMLElement {
static get observedAttributes() { // Attributes on the component must be added to trigger attributeChangedCallback
return ['c'.'l'];
}
constructor() {
super(a)const shadowRoot = this.attachShadow({mode: 'open'})
const div = ` < div > < heaher > my head < header > < div > content < / div > < footer > end < footer > < / div > `
shadowRoot.innerHTML = div
}
connectedCallback() { // Execute when adding
console.log('add')}disconnectedCallback() {// To delete the file, run
console.log('disconnectedCallback')}adoptedCallback() {
console.log('adoptedCallback')}attributeChangedCallback() { // When the property is changed
console.log('attributeChangedCallback')
}
}
customElements.define('test-life-cycle', LifeCycle)
const add = document.querySelector('#add')
const update = document.querySelector('#update')
const move = document.querySelector('#move')
const remove = document.querySelector('#remove')
const moveDiv = document.querySelector('#moveDiv')
let testLifeDom = null
function random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
add.addEventListener('click'.() = > {
testLifeDom = document.createElement('test-life-cycle') // Create the custom component defined above
// console.log('testLifeDom', testLifeDom)
document.body.appendChild(testLifeDom);
testLifeDom.setAttribute('l'.'100');
testLifeDom.setAttribute('c'.'red');
console.log('add', testLifeDom)
})
update.addEventListener('click'.() = > {
const div = '
updated
'
// console.log('update', testLifeDom.shadowRoot.innerHTML)
testLifeDom.shadowRoot.innerHTML = div
testLifeDom.setAttribute('l', random(50.200));
testLifeDom.setAttribute('c'.`rgb(${random(0.255)}.${random(0.255)}.${random(0.255)}) `);
})
move.addEventListener('click'.() = > {
console.log('moveDiv', moveDiv)
moveDiv.appendChild(testLifeDom)
})
remove.addEventListener('click'.() = > {
console.log('remove')
document.body.removeChild(testLifeDom);
})
/* Mount components via IS */
customElements.define('test-is-com'.class extends HTMLDivElement {
constructor() {
super(a)console.log('mount'.this.innerHTML)
// By mounting this, which is the instance of the currently mounted element, you can do something about it}}, {extends: 'div'})
</script>
</body>
</html>
Copy the code