Web组件：操纵阴影DOM的CSS

Question

我正在使用iframe标签的Web组件。

例如：

<my-component>
  <!-- SHADOW DOM -->
  <iframe>
    ...
  </iframe>
</my-component>

现在，当我尝试样式my-component如下所示时，它似乎不适用。

my-component {
  cursor: default;
}

默认行为是光标：指针，我想摆脱它。 访问Shadow dom，例如吗？

my-component > iframe {
  cursor: default;
}

我可以直接通过CSS 不确定是否可能发生这样的事情。

Answer 1

要修改嵌套的Web组件，包含组件的作者必须通过:: part（）来公开这些组件（在此处阅读更多有关它的信息在阴影中的样式 - dom-with-with-css-shadow-parts/＃aa-styling-shadow-dom-with-part“ rel =” nofollow noreferrer“> https://css-tricks.com/stylicks.com/styling--在阴影中 - dom-with-with-css-shadow-parts/＃aa-styling-shadow-dom-with-with-part ）。

否则，您必须使用JavaScript来样式的嵌套Web组件。

const myComponent = document.querySelector('my-component');
const childIFrame = myComponent.shadowRoot.querySelector('iframe');

childIFrame.style.cursor = default;

如果要到达嵌套在另一个Web组件中的Web组件的阴影，则必须使用ShadowRoot进一步挖掘：

const myComponent = document.querySelector('my-component');
const childComponent = myComponent.shadowRoot.querySelector('child-component');
const childIFrame = childComponent.shadowRoot.querySelector('iframe');

childIFrame.style.cursor = default;