如何在没有 JS 的情况下将影子根中的目标定位到类？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何在没有 JS 的情况下将影子根中的目标定位到类？

P粉610028841 2024-03-30 12:47:21

[CSS3讨论组]

555

假设我有带有影子根的 html 元素。

<my-element>
#shadow-root
<div class='need-target-this' />
</my-element>

如何将 div 定位到 Shadow root 内？

我尝试过使用

:host(my-element.need-target-this)

但这并没有帮助。我在这里缺少什么？

P粉610028841

全部回复(2)

P粉5210131232024-03-31 10:24:38 2楼

在shadowDOM内使用标签设置shadowDOM的样式
另请参阅::part：https://developer.mozilla.org/en-US/docs/Web/CSS/::part
另请参阅：： :slotted CSS 选择器，用于 ShadowDOM 插槽中的嵌套子级

customElements.define("my-element",class extends HTMLElement{
  constructor(){
    super().attachShadow({mode:"open"}).innerHTML = `
    `;
  }
  connectedCallback(){
    this.shadowRoot.querySelector("span").innerHTML = `Web Component!`;
  }
});

Hello

赞 +0

添加回复

P粉2327937652024-03-31 00:21:30 1楼

万一它会对某人有所帮助：我用 div 包装了我的元素，添加了 ref 然后去了

const Shadow = ref.current.querySelector('my-element').shadowRoot

const target = Shadow?.querySelector('.need-target-this')

target.style.whatever = '值';

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

app下载

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

PHP学习

技术支持

返回顶部