自定义web组件.js

// 基本
class PonyComponent extends HTMLElement {
  constructor() {
    super();
    console.log("I'm a pony");
  }
  connectedCallback() {
    this.innerHTML = '<h1>General Sola</h1>';
  }
}

customElements.define('ns-pony', PonyComponent);

// shadow elemety

class PonyComponent extends HTMLElement {
  constructor() {
    super();
    console.log("I'm a pony");
    const shadow = this.attachShadow({ mode: 'open' });
    const title = document.createElement('h1');
    title.textContent = 'General Sola';
    shadow.appendChild(title);
  }
}

// 使用模板
/**
<template id="pony-template">
  <style>
    h1 {
      color: blue;
    }
  </style>
  <h1>General Sola</h1>
</template>
*/
class PonyComponent extends HTMLElement {
  constructor() {
    super();
    console.log("I'm a pony");
    const template = document.querySelector('#pony-template');
    const title = document.importNode(template.content, true);
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.appendChild(title);
  }
}