CSS 影子根的子选择器

Question

<curie-image id="DynamicImage1">
    #shadow-root
        <img alt="No Image" style="width:100%;height:100%" src="data:image;base64, ...">
</curie-image>

我正在尝试访问上面的img元素以设置其object-fit属性。 我无权访问底层 JavaScript，因此无法设置影子根的子元素的part属性，因此影子 dom::part 元素的样式子元素在我的情况下不起作用。 另外，我相信在这种情况下使用:host()选择器将不起作用，因为选择器需要“在影子树的上下文中评估”才能工作。

考虑到这些限制，是否有任何 CSS 选择器将 select 作为我的影子根的孩子，来自影子根之外的上下文？

出于某种原因，全局 CSS 文件中img的一个简单选择器执行 select 这个影子根中的img元素，即使它应该匹配所有这些元素，即使它们在影子根中 - 请参见 CSS 和下面的结果样式（请注意，尚未为img元素设置object-fit属性）。

...
img { 
  object-fit: none;
}

Answer 1

由于它是一个开放的 shadowRoot，您可以使用 JavaScript 访问

.querySelector("curie-image").shadowRoot.querySelector("img").style.objectFit="none"

但那是ductaping styles。

潜入所有 <img>

您可以通过以下方式深入了解所有 IMG：

（不会深入研究closed的 shadowRoots）

const shadowDive = (
  el,
  selector,
  match = (el, root) => {
    if(root.localName == "curie-image"){
      el.style.ObjectFit="none";
    }
  },
  root = el.shadowRoot || el
) => {
  root.querySelector(selector) && match(root.querySelector(selector), root);
  [...root.querySelectorAll("*")].map(el => shadowDive(el, selector, match));
}

shadowDive(document.body, 'img[style]' );

免责声明：未经测试的代码片段

---

最好你会想要更改 curie curie-image源代码并引入 HTML <slot>和 CSS ::part （你也可以动态地使用 JS）

笔记：

Web 组件可以做客户端，没有框架可以用组件做的事情：

customElements.define( "curied-image" , 
  class extends customElements.get("curie-image") {

  connectedCallback(){
    super.connectedCallback(); // call original <curie-image> connectedCallback
    
    // now do what you want with 'this' <curied-image> Web Component here

  }

});

查看我的 Dev.To 帖子：

• 如何用 Web 组件作弊

• 更多 Wordle = Mordle，扩展 Josh 他的 Web 组件

注意：您可以扩展closed的 Web 组件； 但是你仍然不能访问它的 shadowRoot。