WebComponents

WebComponents

介绍及使用

CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。使用 window.customElements属性可以自定义标签，扩展内置标签的功能。

<!--调用自定义标签-->
<demo-element></demo-element>
<!--调用基于内置元素创建的自定义元素-->
<p is="demo-element"></p>
<script>
//2.定义自定义元素的类
class DemoElement extent HTMLElement {	//继承最基础的标签结构，可以通过标签的$0的属性查看proto值
  constructor() {
  	super()
  	...
  }
}
//1.创建自定义元素
window.customElements.define('demo-element',DemoElement)//自定义元素使用customElements的define方法
window.customElements.define('demo-element',DemoElement,{extends:'p'})//基于内置元素创建自定义元素时需要进行配置

</script>

shadowDom

隐藏标记结构、样式、行为等。并与页面上的其他代码相隔离

<demo-element></demo-element>
<script>
class DemoElement extent HTMLElement {	//继承最基础的标签结构，可以通过标签的$0的属性查看proto值
  constructor() {
  	super()
  	const shadow = this.attachShadow({ mode: 'closed' })//设置为close拒绝组件外对DOM访问
	const image = document.createElement('img')
    image.src = 'https://s0.lgstatic.com/i/image6/M01/3F/75/CioPOWCeIdmAW_XDAAHS6o22j6M241.png'
    image.width = '200'
    shadow.append(image, span, style)
  }
}

window.customElements.define('demo-element',DemoElement)
</script>

HTMLtemplate

<template id="myTemplate">
    <style>
      span {
        background-color: orange;
      }
    </style>
    <img src="https://s0.lgstatic.com/i/image6/M01/3F/75/CioPOWCeIdmAW_XDAAHS6o22j6M241.png" alt="" width="200">
    <span>这是span1</span>
    <span>这是span2</span>
    <slot name="title"></slot>
  </template>
  <demo-element>
    <div slot="title">
      <span>这是插槽1设置的内容</span>
    </div>
  </demo-element>
<script>
	const shadow = this.attachShadow({ mode: 'open' })
    // 获取模板，并根据模板生成结构
    const template = document.getElementById('myTemplate')
    // 克隆模板内容，并生成
    shadow.append(template.content.cloneNode(true))
</script>