Web Componentsとか

Web Componentsは、一言で言えばHTML/CSS/JavaScriptといったWeb技術上で、再利用できる部品作りを促進する仕組み

Shadow DOMはそれぞれ異なるスコープを持つため、CSSやJavaScriptの名前空間が他と干渉ない：カプセル化



sample

See the Pen Web Componentsとか1 by takapen (@takapen) on CodePen.

html

test1btn
test2btn
test2btn2

css

.test1 {
  --txColor: #333;
  --bgColor: #cc0;
}
.test2 {
  --txColor: #fff;
  --bgColor: #0cc;
}

js

class testIcon extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.innerHTML = `
      
      

    `;
  }
}

customElements.define("test-icon", testIcon);

sample

See the Pen Web Componentsとか2 by takapen (@takapen) on CodePen.

html

  
  
タイトル1
  
説明1説明説明説明説明説明説明説明説明説明説明説明説明説明



  
  
タイトル2
  
説明2説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明説明

js

class singleItem extends HTMLElement {
  static get template() {
    return `
    
    

      

        
      
      

        
        
      
    
    `;
  }

  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    }).innerHTML = singleItem.template;
  }

}

customElements.define('single-item', singleItem);

参考
Web Componentsについて気になること、泉水さんに全部聞いてきました！ | HTML5Experts.jp
ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)