とりあえず、Webサイト全般に必要なパーツを作ってみたいので、とりあえずサイト内を案内するナビゲーションボタンを作ろうと思います。ハンバーガーボタンを押すとメニューが出てくるあれにイメージが近いです。あれを作るのも面白くないのでもうちょっと工夫してみるつもりですが、まずはWebコンポーネントとして必要最低限備わっている必要がある核を作ってみましょう。

class FanMenu extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' })
        .innerHTML = `<button>最小構成！</button>`;
  }
}

// 独自タグとして登録
customElements.define('fan-menu', FanMenu);

こんなJavaScriptを用意して、

<fan-menu></fab-menu>

と書いたら、innerHTMLに入れた中身がレンダリングされるという寸法です。HTML側はすっきりして、全部JavaScript側に隠蔽されています。CSSもinnerHTMLの中にstyleタグで書いちゃえばいいみたいです。

fan-menuタグが新しく作られたわけだ。このタグには一つ以上のハイフンを含めるのがW3Cの仕様らしいです。これがカスタムエレメントで、その実態はJavaScriptの中のFanMenuクラスです。customElements.defineで両者を結び付けてます。
FanMenuはHTMLElementクラスを継承しており、constructorの中でsuperを呼んで親要素のconstructorを呼べばいいみたいです。
attachShadowでshadow DOMとやらもくっつけられるぞ！ってところを見せておきましたが、今はまだ必要がないので削っても構わない部分です。

HTML, CSS, JavaScriptさえ書けるようになったら、もうこっちのものですね。いつもやってたようにやればよさそうです。主な編集ファイルがjsファイルにはなりそうですが。