VUEフレームワークは、それはこの規格に準拠しています。
1、htmlファイル
<！DOCTYPE HTML>
<HTML>
<HEAD LANG = "EN">
<メタ文字コード= "UTF-8">
<タイトル>マイファーストWebComponent </ TITLE>
<リンクのrel = "輸入"のhref = "コンポーネント/ favorite- colour.html」/>
</ HEAD>
<BODY>
<好きな色> </好きな色>
</ BODY>
</ HTML>
2、テンプレートファイル
<！ - WebComponent例オフベース要素定型：https://github.com/webcomponents/element-boilerplate - >
<テンプレート>
<スタイル>
.coloured {
色：赤。
}
</スタイル>
<P>私の好きな色です。<強いクラス= "色">赤</ strong>の</ P>
</テンプレート>
<スクリプト>
（機能（）{
//はに基づいてオブジェクトを作成します。 HTML要素のプロトタイプ
のvar要素= Object.create（HTMLElement.prototype）;
//は<テンプレート>からコンテンツを取得
するvarテンプレート= document.currentScript.ownerDocument.querySelector（ 'テンプレート'）コンテンツ。
element.createdCallback =関数（）{
//シャドウルート作成
VARをshadowRoot = this.createShadowRoot（）。
//シャドウルートにテンプレートのクローンを追加
するvarクローン= document.importNode（テンプレート、真の）;
shadowRoot.appendChild（クローン）。
}。
document.registerElement（ 'お気に入り-colour1'、{
プロトタイプ：元素
}）。
}（））。
</ SCRIPT>