😇

Web Componentにもスコープがくるか

2022/08/09に公開約800字

https://github.com/justinfagnani/webcomponents/blob/scoped-registries/proposals/Scoped-Custom-Element-Registries.md

これを見ると

  • CustomElementRegistryクラスをインスタンス化できるようにして欲しい
  • ShadowRootにこのレジストリを関連付けられるようにして欲しい
    のように提案をしているらしいです

つまりどういうことか

現在、Web Componentを定義する時には

customElements.define(name, element)

のようにするしかありませんでした。が、このやり方だとグローバルに定義されてしまうのが難点です。なので、

const registry = new CustomElementRegistry()
registry.define(name, element)

class Element extends HTMLElement{
	constructor(){
		this.attachShadow({ mode: "open", registry })
	}
}

のように、要素のShadow DOMのスコープ内で定義できるようにしてほしいとのことです。

何が良いのか

Web Component同士の依存関係が解決され、もっと簡潔にコードを記述できます。さらに、ライブラリも参画し易くなります(!)また、グローバル空間にある要素と同じ名前を利用したい場合などに便利ですね。

終わりに

早くこの提案が通って欲しいです。私も現在Web Componentを使ったフレームワークで依存関係の構築に頭を悩まされています...

Discussion

ログインするとコメントできます