js操作shadow-root内的DOM元素

这篇具有很好参考价值的文章主要介绍了js操作shadow-root内的DOM元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、背景

项目中在DOM结构里遇到了shadow-root(open),用JS方法无法直接获取其内的DOM元素

#shadow-root,css,html5,前端

二、shadow DOM

Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中,Shadow DOM 接口是关键所在,它可以将一个隐藏的、独立的 DOM 附加到一个元素上。shadow-root包裹下的对象,不在全局的DOM树中,因此getElementById 等方法,获取不到包裹中的对象。

  • Shadow DOM 这款工具旨在构建基于组件的应用。因此,可为网络开发中的常见问题提供解决方案:
  • 隔离 DOM:组件的 DOM 是独立的(例如,document.querySelector() 不会返回组件 shadow DOM 中的节点)。
  • 作用域 CSS:shadow DOM 内部定义的 CSS 在其作用域内。样式规则不会泄漏,页面样式也不会渗入。
  • 组合:为组件设计一个声明性、基于标记的 API。
  • 简化 CSS - 作用域 DOM 意味着您可以使用简单的 CSS 选择器,更通用的 id/类名称,而无需担心命名冲突。
  • 效率 - 将应用看成是多个 DOM 块,而不是一个大的(全局性)页面。

Shadow DOM 与普通 DOM 相同,但有两点区别:

  • 创建/使用的方式;
  • 与页面其他部分有关的行为方式。

通常,您创建 DOM 节点并将其附加至其他元素作为子项。 借助于 shadow DOM,您可以创建作用域 DOM 树,该 DOM 树附加至该元素上,但与其自身真正的子项分离开来。这一作用域子树称为影子树。被附着的元素称为影子宿主。

简单的意思就是可以用来独立建立一块渲染块,不受外层样式的影响,内层的样式也不影响外层的显示。

三、操作shadow-root内的元素

1.先获取shadow-root的父级节点,然后用shadowRoot取得这个父级节点的shadow块,然后就可以进行操作了

document.querySelector('#root').shadowRoot.querySelector('.chakra-portal')

#shadow-root,css,html5,前端

2.在shadow块下面创建style标签,在里面添加样式

    let gtx = document.querySelector("#root");
    let style = document.createElement("style");
    style.innerHTML =
      ".grid_wrap { display: flex;justify-content: center;align-items: center;}";
    gtx.shadowRoot.appendChild(style);

 相关资料:使用 shadow DOM - Web Components | MDN

                   深入理解Shadow DOM v1 - 掘金         文章来源地址https://www.toymoban.com/news/detail-557812.html

到了这里,关于js操作shadow-root内的DOM元素的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费 , 如需要项目实战或者是体系化资源,文末名片加V! 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。 荣誉: 2022年度博客之星Top4、2023年度超

    2024年02月04日
    浏览(65)
  • JS 监听元素dom变化

    我们在开发中,会遇到一些需求,需要监听元素变化,比如元素属性变化,元素大小变化,今天,我们就来聊聊俩种常用实现监听的方案,其他的自行研究 一、ResizeObserver ResizeObserver 是来监听元素的大小位置发生变化,也可以说是回流(重排)时的变化 然后,我们创建监听器,

    2024年02月15日
    浏览(61)
  • JS中获取dom元素高度相关方法

    javascript中获取dom元素高度和宽度的属性如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight 网页可视区域宽: document.body.offsetWidth (包括边距的宽) 网页可视区域高: document.body.offsetHeight (包括边距的高) 网页正文全文宽: document.body.scrollWidth

    2024年02月07日
    浏览(53)
  • JS 获取 HTML DOM 元素的方法

     

    2024年02月11日
    浏览(44)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(51)
  • DOM操作之元素查找

    通常我们操作一个元素节点前都需要查找到这个元素,查找到这个元素有两种方式。 使用选择器函数查找元素 通过元素的关系属性来查找元素 通过节点元素的 ID 得到此节点 上面的例子中,id = ”boxDiv“ 有重复,在HTML的规则中, ID在一个网页应当是唯一的,如果重复, do

    2024年02月04日
    浏览(43)
  • 如何使用DOM操作HTML元素

    欢迎来到DOM操作的狂欢!你想改变HTML元素的样式或者移动它们?没问题,DOM操作可以轻松实现这些! 首先,我们来谈谈什么是DOM。DOM就像一棵树,它的每个节点代表HTML文档中的一个元素。你想要修改或者操作这些元素,就需要使用DOM。 那么,如何使用DOM呢?首先,你需要获

    2024年02月06日
    浏览(80)
  • Web Components详解-Shadow DOM插槽

    插槽实际上也属于组件通信的一种方式,但是由于其强大的api和实用性,我将其单独拆开来介绍。 Slot(插槽)是Web Components中一个重要的特性,它允许在组件内部定义占位符,以便父组件可以向其中插入内容。换句话说就是将子组件或者标签传入父组件中,最终达到在父组件

    2024年02月07日
    浏览(32)
  • Web Components详解-Shadow DOM基础

    目录 引言 概念 基本用法 attachShadow函数 mode(模式) delegatesFocus(委托聚焦) Custom Elements+Shadow DOM 基本用法 样式及属性隔离 写在最后 相关代码 参考文章 上篇文章的自定义标签中,我们使用customElements对象对原生标签进行拓展,达到组件的拓展性与复用性的效果,那么如何

    2024年02月07日
    浏览(32)
  • JS dom元素和鼠标位置之间的一系列属性快速参考

    clientHeight     获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。 clientLeft     获取    offsetLeft     属性和客户区域的实际左边之间的距离。 clientTop     获取    offsetTop     属性和客户区域的实际顶端之间的距离。 clientWidth     获取对象

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包