host
host属性を使うと、要素のホストコンポーネントのインスタンスを取得することができます。 これは、コンポーネントの内部からそのコンポーネントのホストコンポーネントのデータやメソッドにアクセスするのに便利である。
以下は、host属性を使用してホストコンポーネントのインスタンスを取得する方法を示す例です。
<template component>
<div>tag: {{txt}}</div>
<div>bool: {{txt2}}</div>
<script>
export default {
tag: "host-demo",
data: {
txt: "-",
txt2: '-'
},
ready(){
const host = this.shadow.$("div").host;
this.txt = host.tag;
this.txt2 = host === this;
}
};
</script>
</template>
この例では、host-demoというカスタムコンポーネントを作成し、その内部でホストコンポーネントのインスタンスにアクセスし、それらが等しいかどうかを比較します。
もし要素がコンポーネント内に存在しない場合、host の値は null になります。例えば：
<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.26/dist/ofa.min.js"></script>
<ul>
<li id="target">
I am target
</li>
</ul>
<div id="logger" style="border:red solid 1px;padding:8px;">-</div>
<script>
setTimeout(()=>{
$("#logger").text = String($("#target").host);
},500);
</script>
この例では、#target要素はbodyの下にあり、コンポーネントやページの中にはないので、$("#target").hostの値はnullである。