本文介绍了设置Shape Dom：：Part元素的子元素样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
那么不妨允许所有shadowDOM样式从外部开始。(无法完成) 如果不想指定
问题描述
我有一个Web组件，它在阴影DOM中呈现以下内容：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
</div>
...
</custom-banner>
要设置headertext的样式，下面的css效果很好：
custom-banner::part(headertext) {
border: 5px solid green;
}
现在假设我有这样的东西：
<custom-banner>
#shadow-root
<div part="headertext">
I am the header text!
<span>I am the subheader text!</span>
</div>
...
</custom-banner>
是否有方法以影子部件的子项为目标？也就是说，如下所示(似乎不起作用)：
custom-banner::part(headertext) span {
border: 5px solid red;
}
我意识到这类事情可能会削弱::part的整个目的，但可能不会？
明确地说，在本例中，副标题范围是而不是一个带槽的子项。它始终是组件的一部分，并且在影子DOM中。以上示例用于在浏览器中呈现组件。
谢谢！
推荐答案
唉，只能::part节点本身。
::part的目的那么不妨允许所有shadowDOM样式从外部开始。(无法完成) 如果不想指定
part="subheader"，
您可以使用范围部分的css属性，请参阅--subheader: blue
好博客：
- Why is my shadowDOM inheriting styles
::partsMonica Dinculescu(Google)：https://meowni.ca/posts/part-theme-explainer/
<style>
body {
/* note how 'inheritable styles' do style shadowDOM */
font: 28px Arial;
color: green;
}
custom-banner::part(headertext) {
/* style shadowDOM from global CSS */
background: pink;
--subheader: blue;
}
</style>
<custom-banner></custom-banner>
<script>
customElements.define("custom-banner", class extends HTMLElement {
constructor() {
super()
.attachShadow({mode:"open"})
.innerHTML = `<style> span { color:var(--subheader) } </style>` +
`<div part="headertext">I am the header text!` +
`<span>I am the subheader text!</span>` +
`</div>`;
}
});
</script>这篇关于设置Shape Dom：：Part元素的子元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！