Javascript 如何在自定义元素的槽内设置css样式？
我在shadowDOM自定义元素模板中应用表样式，在插槽中，它不接受表th和td CSSJavascript 如何在自定义元素的槽内设置css样式？,javascript,css,web-component,tabular,custom-element,Javascript,Css,Web Component,Tabular,Custom Element,我在shadowDOM自定义元素模板中应用表样式，在插槽中，它不接受表th和td CSS 类表扩展了HtmleElement{ 构造函数（）{ 超级（）； //log（“这个手风琴->”，这个） 设置超时（（）=>{ const template=document.createElement（'template'）； template.innerHTML=` ：：开槽（表）{ 颜色：红色； 宽度：100%； } ：：开槽（表tr th）， ：：开槽（表tr td）{ 文本对齐：左对齐； 填充：
类表扩展了HtmleElement{
构造函数（）{
超级（）；
//log（“这个手风琴->”，这个）
设置超时（（）=>{
const template=document.createElement（'template'）；
template.innerHTML=`
：：开槽（表）{
颜色：红色；
宽度：100%；
}
：：开槽（表tr th），
：：开槽（表tr td）{
文本对齐：左对齐；
填充：10px0；
}
`;
const shadowDOM=this.attachShadow({
模式：“打开”
});
appendChild（template.content.cloneNode（true））；
}, 0);
}
}
自定义元素。定义（'t-表'，表）
Sl号。
名称
1.
名称
您不能从：：slotted
伪元素选择器中选择子元素。
这是故意的；组件本身不应考虑开槽元件的样式。例外情况是正在开槽的元素，但不是其子元素
取而代之的是，用老式的方式从灯光中设计元素
类表扩展了HtmleElement{
构造函数（）{
超级（）；
const template=document.createElement（'template'）；
template.innerHTML=`
：：开槽（表）{
颜色：红色；
宽度：100%；
}
`;
const shadowDOM=this.attachShadow({
模式：“打开”
});
appendChild（template.content.cloneNode（true））；
}
}
自定义元素。定义（'t-表'，表）
.my table tr th，
.我的桌子{
文本对齐：左对齐；
填充：10px0；
}
Sl号。
名称
1.
名称
参见StackOverflow答案：
如何在模板innerhtml中应用CSS？您只能将样式应用于在阴影DOM模板中开槽的元素和固定的元素。