rucky
はじめに
WebComponentsで紹介した内容のサブセットです。
シャドウDOMとtemplateタグは使用しますが、カスタムタグの登録とHTMLインポートは使用しません
サーバサイドレンダリングが可能なので検索エンジンに優しく、すべて同期的に処理するのでユーザにも優しいパターンです
仕込み
次のコードをhead内に仕込んでおきます
仕込み
コード貼り付け
WebComponentsで紹介したコードと同じなので比較してみてください貼り付け
ポイントは
- 全体を<x-tag>に入れる
- cssはブラウザに登録されるとマズイので<template name="style">に入れておく
- scriptはどっちもでいいですが、とりあえず<template name="script">に入れておく
- 最後に<script>rucky()</script>を記述してください
以上により、<x-tag>が自動的にシャドウDOMになり、内容もシャドウDOMに移動します
全体をtemplateで囲む方法も考えたが、検索エンジンに無視されそうだからボツにしました