ウェブコンポーネントとして、ウェブサイト上で利用するパーツの再利用性を高める上で、一つ悩みの種になるのはCSSによるスタイリングです。
サイトによって、グローバルCSSの影響を受けて、本来汎用性が高いはずのウェブコンポーネントのスタイリングに影響が出るのは好ましくありません。

CSS自体にも@scopeや、様々なセレクターや疑似クラスなどでかなりスタイリングをコントロールしやすくなっていますが、Reactなどの仮想DOMやウェブ標準仕様となったShadowDomは、システムやサイトの用途によって積極的に利用して良いと思います。

## 実例

非常に簡単です。 shadowrootmodeをopenにするだけでjsのattachShadowを利用せずに、ShadowDom化したDomを生成できます。

```html
<my-comment-component>
    <template shadowrootmode="open">
        <style>
            span{
                color:#ff0000;
            }
        </style>
        <p>
            this is <span>red.</span>
        </p>
    </template>
</my-comment-component>
```

## 注意点

これらは宣言的ShadowDOM(Declarative Shadow DOM)と呼ばれる機能です。
自身のrootに対して、attachされるため、body直下に templateタグで定義してしまうと、bodyの他の内容も全て上書きしてしまうので注意しましょう。

また、今回の形ですとjs利用に比べて手軽ではありますが、データからDOMを生成したりまでは出来ませんし、slotの機能などを活かす事ができません。
その場合はjsとの組み合わせが必要となります。

[参考](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom?hl=ja)



## VanJSとvan-elementを利用してShadowDom＋リアクティブなUIを実装する

ウェブのシステムや管理画面ではフロントの実装でReactを利用する事が多いですが、
Webサイトや軽量なパーツを実装する場合は、軽量なフレームワークや生JSで実装する事が多いです。

そして、軽量なフレームワークの中でも最近はVanJSを利用しています。
- [VanJS](https://van-element.pages.dev/)

複数のサイトにまたがりCSSの影響を受けない為に今回はShadowDomを利用できるvan-elementを紹介します。
- [van-element](https://van-element.pages.dev/)

# ShadowDomとWebコンポーネント
平たく言えば、SodowDomとしてカプセル化されたHtmlElements郡であり、これらはカプセル外にあるCSSの影響を受けません。
そのようなパーツは再利用性が高い、webコンポーネントとして利用が可能になります。

# 導入方法
[インストール、利用方](https://van-element.pages.dev/intro/get-started.html)
defineという関数を追加するだけで、簡単に利用ができます。
jsでそのまま実装するよりもコード記述量も少なくて、直感的でわかりやすくなります。

サンプルコード
```js
import { define } from "vanjs-element";
import van from "vanjs-core";

const {p,button} = van.tags;

export const SetVanElements = () => {

    define("custom-element", () =>
        p(
            "I am a Van Element 🎉 ",
            button({ onclick: () => alert("Hello from VanJS 🍦") }, "Click me")
        )
    );
}
```

これで、実際にHTML部分に 
```html
  <custom-element></custom-element>
```
と入力するだけで、利用が可能になります。




1年前

shadowrootmodeで,htmlだけでShadowDomを生成する。(宣言的Shadow Domについて)

Toysking.news
2024/3/23 3:8 公開

関連記事一覧

VanJSとvan-elementを利用してShadowDom＋リアクティブなU..

関連カテゴリ一覧

1年前

shadowrootmodeで,htmlだけでShadowDomを生成する。(宣言的Shadow Domについて)

Toysking.news2024/3/23 3:8 公開

関連記事一覧

VanJSとvan-elementを利用してShadowDom＋リアクティブなU..

関連カテゴリ一覧

Toysking.news
2024/3/23 3:8 公開