Web Components All In One

Web Components

https://www.webcomponents.org/

HTML Template
Custom Element
Shadow DOM

Web Components 2020 🚀

https://caniuse.com/#search=Web Components

HTML Imports (已废弃)

HTML Template

<template> & <slot>

Custom Element

自定义元素名称必须使用连字符-组成，为了和原生的 HTML元素区分开;
自定义元素如果没有对应 class 实现且注册, 浏览器会把它解析成 span元素的效果

  <emoji-element></emoji-element>
  <ufo-element>🛸</ufo-element>
  <ghost-element>👻</ghost-element>
  <shit-element>💩</shit-element>

  <ufo-element-🛸>🛸</ufo-element-🛸>
  <ghost-element-👻>👻</ghost-element-👻>
  <shit-element-💩>💩</shit-element-💩>

Shadow DOM

CustomEvent

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

// CustomEvent
this.dispatchEvent(new CustomEvent('loadend', {detail: {success: true}}));

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent


// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});

// dispatch
obj.dispatchEvent(event);