如何解决如何访问 Web 组件中的未命名的插槽内容
如何使用 javascript 访问 web 组件的 connectedCallback 中未命名插槽的内容(在本例中为='我需要访问此文本节点')?
使用 javascript shadowRoot 只显示里面没有任何内容。但是 Chrome 会按预期正确呈现它。
谢谢
请注意,为简洁起见,问题中省略了实际的类构造函数。
<template id="my-option-template">
<slot></slot>
</template>
.......
使用上面的模板
<my-option>I need to access this text node</my-option>
解决方法
您需要注意一两种技术行为:
-
开槽内容反射从lightDOM到shadowDOM
<slot>
它未移动。
因此,您可以在 容器 CSS 中设置 lightDOM 内容的样式(以下示例为“绿色”颜色中的全局 CSS)
长答案见:::slotted CSS selector for nested children in shadowDOM slot -
自己编写相同的延迟时connectedCallback
在 opening 标签<my-element>
上触发 它的其余(innerHTML)内容尚未解析。
库会帮助处理更多稍后触发的回调..
但是为什么要加载 2 kB,并添加依赖项,
当您可以使用setTimeout
<template id="MY-ELEMENT">
<h3>Slotted content:</h3>
<slot></slot>
<h3>Appended content:</h3>
<h2></h2>
</template>
<style>
my-element { color:red }
my-element h2 { color:green }
</style>
<my-element>
<h2>need to access this text node</h2>
</my-element>
<script>
customElements.define('my-element',class extends HTMLElement {
constructor() {
let template = (id) => document.getElementById(id).content.cloneNode(true);
super() // sets and returns this scope
.attachShadow({ mode: "open" }) // sets and returns this.shadowRoot
.append(template(this.nodeName));
}
connectedCallback() {
setTimeout(() => {
this.shadowRoot.querySelector("H2").append(this.innerHTML)
})
}
});
</script>
-
注意
my-element h2{ color:green }
如何不设置<h2>
inside shadowDOM
'red' 是因为一些样式属性级联到 shadowDOM
https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/ -
带有 requestAnimationFrame、Promises 等的所有库“延迟”回调实现都有效地执行相同的操作:等待事件循环为空
事件循环到底是什么?
菲利普·罗伯茨:https://www.youtube.com/watch?v=8aGhZQkoFbQ
可以在 this.shadowRoot.querySelectorAll('slot')
中使用 connectedCallback
,这将为您提供所有定义插槽的 NodeList。可以使用 assignedNodes
方法访问插槽的内容。然后,您可以选择将 slotchange
事件侦听器应用于要在插槽内容更改时通知的插槽元素:
<my-option><b>I need to access this text node</b></my-option>
<script>
customElements.define('my-option',class extends HTMLElement {
constructor() {
super(); // sets and returns this scope
var shadow = this.attachShadow({mode: 'open'});
shadow.innerHTML ='<slot></slot>';
}
connectedCallback() {
let slots = this.shadowRoot.querySelectorAll('slot');
console.log(slots);
slots[0].addEventListener('slotchange',function(e) {
let nodes = slots[0].assignedNodes();
console.log(nodes);
});
}
});
</script>
关于https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement的更多信息
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。