// 通过 window.customElements 访问 CustomElementRegistry 的实例
// console.log(window.customElements)
// --- 独立元素的创建方式 ---
// 1 提前准备用于定义元素的类
class DemoElement extends HTMLElement {
constructor () {
super()
}
}
// 2 创建自定义元素（俗称创建 Web 组件实例）
window.customElements.define('demo-element', DemoElement)
?
// 创建继承自内置元素的自定义元素
// 1 在 class 中继承对应内置元素的构造器
class DemoElement extends HTMLUListElement {
constructor () {
super()
const image = document.createElement('img')
image.src = 'https://s21.lgstatic.com/growth/activity/20210128/1611825307111.png'
image.height = '200'
// this 为当前自定义元素的实例
this.append(image)
}
}
// 传入参数3 的 extends 为对应元素名
window.customElements.define('demo-element', DemoElement, { extends: 'ul' })// 提前准备用于定义元素的类 (独立自定义元素)
class DemoElement extends HTMLElement {
constructor () {
super()
// 为了确保组件的功能独立，应当将内部元素添加给自定义元素的 Shadow
// 1 为元素创建 ShadowDOM
const shadow = this.attachShadow({ mode: 'closed' })
const image = document.createElement('img')
image.src = 'https://s21.lgstatic.com/growth/activity/20210128/1611825307111.png'
image.height = '200'
const text = document.createElement('p')
text.textContent = '组件内容'
const style = document.createElement('style')
style.textContent = `
:host {
border: 1px solid blue;
}
p {
font-size: 20px;
color: blue;
}
`
// 2 将内部的结构添加给 shadow
shadow.append(image, text, style)
}
}
// 2 创建自定义元素（俗称创建 Web 组件实例）
window.customElements.define('demo-element', DemoElement)// 提前准备用于定义元素的类 (独立自定义元素)
class DemoElement extends HTMLElement {
constructor () {
super()
// 1 获取 HTML 模板内容
const template = document.getElementById('myTemplate')
// 2 创建 Shadow
const shadow = this.attachShadow({ mode: 'open' })
shadow.append(template.content.cloneNode(true))
}
}
// 2 创建自定义元素（俗称创建 Web 组件实例）
window.customElements.define('demo-element', DemoElement)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<template id="myTemplate">
<style>
p {
font-size: 20px;
color: blue;
}
</style>
<slot name="header"></slot>
<img src="https://s21.lgstatic.com/growth/activity/20210128/1611825307111.png" width="200" alt="">
<h2>组件标题</h2>
<p>组件内容</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<slot name="footer"></slot>
</template>
<!-- 适用于独立元素的写法 -->
<demo-element>
<p slot="header">内容1</p>
<p slot="footer">内容2</p>
</demo-element>
<demo-element>
<p slot="header">内容3</p>
<p slot="footer">内容4</p>
</demo-element>
<!-- 继承自内置元素的写法 -->
<!-- <ul is="demo-element"></ul> -->
<p>组件外的 p 元素</p>
<!-- <script src="./01-define.js"></script> -->
<!-- <script src="./02-Customized built-in elements.js"></script> -->
<!-- <script src="./03-ShadowDOM.js"></script> -->
<script src="./04-temlate.js"></script>
</body>
</html>
