英文:
Overriding CSS of div inside a #shadow-root
问题
以下是已翻译的内容：
我们正在使用第三方插件，我试图覆盖特定的一个 div 的 CSS 样式。问题是，我不理解如何与 #shadow-root 一起工作。
[具有 shadow-root 代码的图像](https://i.stack.imgur.com/CF1uU.png)
我尝试使用常规 CSS 来覆盖 .choice--size-small div 的样式，但没有效果：
div.choice--size-small{
display:none!important
}
我的理解是 #shadow-root 的目的是隔离内部的所有内容，以免受到其他 CSS 的影响，这是有道理的。
这可行吗？实现这一目标的最佳方法是什么？
请记住，这是第三方软件，我们只能使用 CSS 和 JS 来实现这一目标。
英文:
We are using a third party plugin and im trying to override the CSS of one div in particular. The problem is that i dont understand how you are suppossed to work with #shadow-root
I have tried using regular CSS to style to override the .choice--size-small div styling but its not working
div.choice--size-small{
display:none!important
}
My understanding is that #shadow-root purpose is to isolate everything that is inside so it doesnt get affected by other CSS, so it makes sense.
Can it be done? what is the best way to achieve this?
Keep in mind this is a third party software and we can only us CSS and JS to achieve this.
答案1
得分: 2
That 3rd party has provided "part" attributes (only some elements) you can use to style the inside of the shadowRoot, without using JavaScript.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
so your CSS can be:
sc-choice::part(base) {
display: none;
}
When an open shadowRoot has no part definitions. You can "get in" with:
document.querySelector("sc-choice").shadowRoot.append(
Object.assign(document.createElement("STYLE"),{
innerText : `div.choice--size-small {
display:none
}`
});
)
英文:
That 3rd party has provided "part" attributes (only some elements) you can use to style the inside of the shadowRoot, without using JavaScript.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/::part
so your CSS can be:
sc-choice::part(base) {
display: none;
}
When an open shadowRoot has no part definitions. You can "get in" with:
document.querySelector("sc-choice").shadowRoot.append(
Object.assign(document.createElement("STYLE"),{
innerText : `div.choice--size-small {
display:none
}`
});
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论