web components 从0到1

// html
<c-button>
  click me
</c-button>


// js
// 定义元素类
class CButton extends HTMLElement{
  constructor(){
    super()
    this._root = this.attachShadow({ mode: 'closed' })
    this.tmp = document.createElement('template')
    this.tmp.innerHTML = `
       <style> 
         .c-button{ border: 0; background: #fff; color: orange }
       </style>
       <button class='c-button'>
         <slot />
       </button>
    `
    this._root.appendChild(this.tmmp.content.cloneNode(true))
  }
}
// 注册元素
window.customElements.define('c-button', CButton)

class CustomElement extends HTMLElement {
   constructor(){
      ....
   }
}
// 注册
window.customElements.define('', CustomElement)

const root = this.attachShadow({ mode: 'closed' })
const tmp = document.querySelector('template')
tmp.innerHTML = `
  // 内容样式 
 <style>
   .c-card{
      width: 400px;
      height: 300px;
      padding: 8px 10px;
      background: #fff;
      border: 1px solid #eee;
   }
  </style>


 // 内容结构
  <div class='c-card'>
     <slot />
  </div>
`
// 挂载内容
root.appendChild(tmp.content)

// html
<template id='tmp'>
  <div class='c-card'>
    <slot />
  </div>
</template>


// js
class Card extends HTMLElement{
  construction(){
    ...
    const tmp = document.querySelector('#tmp')
    root.appendChild(tmp.content)
  }
}
// <template> 内容不会直接显示在html文档中

class Card extends HTMLElement{
  construction(){
    ...
    const tmp = document.createElement('template')
    const slot = document.createElement('slot‘)
    
    card.classList.add('c-card')
    card.appendChild(slot)
    tmp.addpendChild(card)
    root.appendChild(tmp.content)
  }
}

// html
<c-card follow='10'> // 在模板中设置属性值
</c-card>


// js
{
  constructor(){
    ...
     const card = document.createElement('div')
    // 通过 getAttribute 查询元素上是否设置自定义属性值
     const follow =  this.getAttribute('title') || 0
     console.log('follow: ', follow, typeof follow) // 值类型未字符串
    card.innerHTML = follow
  }
}
// 使用js设置属性值
const card = document.querySelector('c-card')
card.setAttribute('follow', 20)

{
  constructor(){
    this._value = 0
  }
  // 除了通过 getAttribute 获取属性外，
  // 也可以通过 getter, setter 定义属性
  get value(){
     return this._value
  }
  set value(v){
     this._value = v
      console.log('value type: ',typeof v)
  }
}
// 修改属性值
const card = document.querySelector('c-card')
card.value = 20
// value type: number

{
  // 属性响应函数, 属性修改后将触发该函数, 类似 vue 的watch函数
  attributeChangedCallback(name, oldValue, newValue){
    console.log(`属性名称: ${name}`)
    console.log(`旧属性值: ${oldValue}`)
    console.log(`新属性值: ${newValue}`)
  }
  // 并不是所有的属性都触发 attributeChangedCallback，只有在 observedAttributes 内注册的属性，才能触发回调
  // 注册触发响应的属性名称
  static observedAttributes = ['value']
  // observedAttributes 也可以为 getter, setter
}

{
  constructor(){
    const card = document.createElement('div')
    card.addEventListener('click', () => {
      // 创建自定义事件
      const event = new CustomEvent('cardClick'， {detail: 'from card'})
      // 抛出事件
      this.dispatchEvent(event)
    })
  }
}
// 挂载事件监听
cont card = document.querySelector('c-card')
card.addEventListener('cardClick', ({detail}) => console.log(detail))

{
  constructor(){
    this._value = 0
    this._root = this.attachShadow({ mode: 'closed' })
    this._rootElement = document.createElement('template')
    this._rootElement.innerHTML = `
<div>
 <button> add </button>
</div>
`
this._rootElement.content.querySelector('button')
.addEventListener('click', () => {
const event = new CustomEvent('add', {detail: this._value + 1})
this.dispatchEvent(event)
})
  }
  render(){
    const ele = document.createElement('div')
    ele.innerHTML = this._value
    this._root.appendChild(ele)
 }
 get value(){ return this._value }
 set value(n){ this._value = n; this.render() }
}
const ele = document.querySelect('element')
// 设置初始值
ele.value = 10
// 添加响应回调
ele.addEventListener('add', ({detail}) => {
  ele.value = detail
})

{
  constructor(){
    const tmp = `
      <div>
        <div>
          默认插槽: <slot />
        </div>
        <div>
          具名插槽: <slot name='sub' />
        </div>
      </div>
    `
    ...
  }
}
// html
<element>
  <div name='sub'> 附属信息 </div>
  <div> 主内容 </div>  
</element>

{
  constructor(){
    // mode 的值可以为 'open' | 'closed'
    this._root = this.attachShadow({ mode: 'closed' }) // 禁止外部访问内部节点
  } 
}