阴影根子的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属性，因此阴影区域的子元素::part元素在我的情况下无法工作。而且，我相信选择器在这种情况下不会工作，因为选择器需要是“在阴影树的上下文中计算”才能工作。

在这些约束条件下，是否有任何CSS选择器将从阴影根之外的上下文中选择我的影子根的子元素？

出于某种原因，全局CSS文件中的img的简单选择器确实会在这个阴影根中选择img元素，即使它们与所有这些元素匹配，即使它们位于阴影根中-请参见下面的CSS和由此产生的样式(请注意，没有为img元素设置object-fit属性)。

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

​

​

Answer 1

因为它是一个开放的shadowRoot，所以您可以使用

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

但这就是对风格的还原。

俯冲

您可以使用以下内容深入所有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-image源代码并引入<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组件进行欺骗
• Mordle，扩展了他的Web组件

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