host
Using the host property, you can obtain the instance of the host component for an element. This is very useful for accessing the data and methods of the host component from within the component.
Here is an example demonstrating how to use the host property to obtain an instance of the host component:
<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>
In this example, we created a custom component host-demo and accessed its host component instance inside the component, and then compared if they are equal.
If the element is not inside a component, the value of host will be null. For example:
<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>
In this example, the #target element is under the body, not inside any component or page, so the value of $("#target").host is null.