首页 前端知识 [Js进阶]如何用jquery获取到shadowRoot里的内容

[Js进阶]如何用jquery获取到shadowRoot里的内容

2024-06-07 23:06:51 前端知识 前端哥 904 655 我要收藏

HTML组件相关的标准

  • HTML Template

  • Shadow DOM 则是原生组件封装的基本工具,它可以实现组件与组件之间的独立性。

  • Custom Elements 是用来包装原生组件的容器,通过它,你就只需要写一个标签,就能得到一个完整的组件。

HTML组件常见的就是使用shadowDOM了

在 Shadow DOM 中,所有内容都是私有的,不可以直接访问。要访问 Shadow DOM 中的内容,您可以使用element.shadowRoot属性获取对 shadowRoot 的引用,然后通过该引用访问其中的元素,例如:

var shadow = document.querySelector("#my-element").shadowRoot;
var h1 = shadow.querySelector("h1");
console.log(h1.textContent);

请注意,在访问 shadowRoot 之前,您需要确保该元素已经完成初始化并创建了 Shadow DOM。

需要注意的是,仅当浏览器支持 Shadow DOM 时,才能访问 shadowRoot。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11327.html
标签
评论
发布的文章

echarts 鼠标划过显示信息

2024-06-14 23:06:40

echarts@5 动画失效

2024-06-14 23:06:39

vue3 聊天机器人 聊天界面

2024-06-14 23:06:06

Vue - Vue3 集成编辑器功能

2024-06-14 23:06:54

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!