自定义元素

自定义元素， 通过使用CustomElementRegistry来定义。要注册一个新的元素，通过window.customElements中的define方法来注册实例。

window.customElements.define('my-element', MyElement)

方法中的第一个参数定义了新创建元素的标签名字， 我们可以使用如下方式直接使用该元素。

<my-element></my-element>

为了和native标签冲突,这里强制使用中划线来连接。 我们使用ES6 class来定义MyElement

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
  static get observedAttributes() {
    reutrn ['attr1', 'attr2']
  }
  connectedCallback() {
    // 元素被插入到DOM中时调用， 类比与react 中的componentDidMount
  }
  disconnectCallback() {
    // 元素从DOM中移除时调用
  }
  adoptedCallback() {
    // 元素被移动到新文档时触发, 一般值iframe, 例如
    // document.getElementById('iframe').contentWindow.document.body.append-child(MyElement)
  }
  attributeChangedCallback(attr, oldVal, newVal) {
   	// 用户传递的属性发生变化时 调用, 仅检查observedAttributes 中属性的变化 
  }
  dosomething() {
    // 获取element实例 可以调用元素上定义的方法
  }
}

声明周期(lifecycle): constructor => attributeChangeCallback => connectedCallback => disconnectCallback

shadowdom mode

const shadowRoot = this.attachShadow({ mode: 'open' })
// open 模式下可以通过element元素的shadowRoot属性访问shadow中的dom元素 close反之

shadowdo 样式隔离 定义

:host {
  
}
:host([disabled]) {
  
}
// 可以通过css 变量在外部定义shadow中的样式
:host {
  --background-color: #fff;
}

shadow slot

slot.assignedNodes() 查看slot 插槽分发情况
::slotted(img) {
// 样式定义
}
shadowRoot.innerHTML = `
	<template id="view1">
		<div>this is temp1</div>
	</template>
	<div>内容</div>
`
template中的内容不会被渲染可用作临时存储的模板内容

渐进增强已有的html元素

class MyButton extends HTMLButtonElement{
  constructor () {
    super()
  }
  connectedCallback() {
    
  }
  someMethod() {
    
  }
}
customElements.define('my-button', MyButton, { extends: 'button' })
// 使用
<button is="my-button">点击</button>