如何定位 #shadow 根内的元素？-解网

问：

我想更改 #shadow 根内部的显示样式，但在定位它时遇到了一些问题。第一个问题，是否可以通过CSS定位它？还是通过JS来做更好？

#retirement-services-modal #rs-two-col::shadow(.wrapper) {
  display: flex;
  align-items: center;
}

<div id="retirement-services-modal">
  <sdf-layout-two-col id="rs-two-col">
    #shadow-root
    <div class="wrapper">
      <div class="col-1">content goes here</div>
      <div class="col-2">content goes here</div>
    </div>
  </sdf-layout-two-col>
</div>

我正在尝试以内部为目标添加一个和..wrapper#shadow-rootdisplay: flex;align-items: center;

我试图用它来定位它，但这似乎不起作用。我也试过，但似乎也没有用。有没有其他方法可以通过CSS定位它？::shadow::part

HTML CSS 用户体验影子根

const el = document.querySelector('#rs-two-col'); // access the outer element
const sh = el.shadowRoot; // access the shadow DOM of the element
sh.querySelector('.wrapper').style.cssText = 'display: flex; align-items: center;'; // access the nested element within the shadow DOM and change the CSS property of the element

<style>
  host-element::part(foo){
    border:10px dashed green;
  }
  div {
    border:20px solid red; /* not applied to shadowDOM */
  }
</style>

<host-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: inline-block;
        width: 100vw;
        background:hotpink;
      }
      .wrapper {
        text-align:center
      }
    </style>
    <div part="foo" class="wrapper">
      <slot></slot>
    </div>
  </template>
  <h2>LightDOM content slotted in shadowDOM</h2>
</host-element>

注意：上面的声明式 shadowDOM 表示法在 FireFox 中尚不可用：
https://caniuse.com/declarative-shadow-domshadowrootmode

上一个：如何自定义 Laravel Breeze 关于密码被泄露的消息？

下一个：manifest.webmanifest 可变名称和图像

如何定位 #shadow 根内的元素？

How to target element inside #shadow-root?

评论

评论