英文:
Unable to select <slot> using CSS Selector, how to style it to make "Launch" text color red?
问题
根据上面的截图，我正在尝试为<slot>元素和插槽内的内容添加样式，以便在单击时显示“Launch”。我如何使用CSS选择器来为插槽添加文本颜色以显示“Launch”？我尝试使用下面的选择器来应用样式，但对我来说没有起作用。
sl-tab::part(base)::slotted(*) {
color: red;
}
英文:
As per above screenshot, I am trying to style web component <slot>, and content inside slot reveal/pointing to "Launch" when clicked. How can I style slot to apply text colour to "Launch". I am struggling to select slot using css selector. Any help/suggestions would be helpful.
I already tried to apply style using below selector but did not work for me.
sl-tab::part(base)::slotted(*) {
color: red;
}
答案1
得分: 0
翻译结果如下：
未将插槽内容移动到 shadowDOM，因此无法从 shadowDOM 中进行样式设置
插槽内容会被反射到 shadowDOM
插槽（lightDOM）内容的样式由 lightDOM 所在的容器/级别控制，此处使用全局 CSS 进行样式设置（请参见 H1 和 span 的样式设置）。
::slotted(span) 只能样式化 lightDOM 内容的外观，无法样式化更深的 DOM 层级（只有 span2 被样式化）。
使用主机元素上的 [attribute] 来样式化插槽文本（请参见 launched）。
<!-- 开始代码片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
customElements.define("component-with-slot", class extends HTMLElement {
constructor() {
super().attachShadow({ mode: "open" }).innerHTML =
`<style>
*::slotted(span) { padding: 2em; }
:host([launched]) { color: red; font-weight: bold; }
</style>` +
`<slot></slot>`;
}
});
<!-- 语言：lang-css -->
/* 全局 CSS */
h1 {
border: 5px solid blue;
}
span {
border: 4px dashed red;
}
<!-- 语言：lang-html -->
<component-with-slot>
<h1>I am slotted <span>span1</span></h1>
<span>span2</span>
</component-with-slot>
<component-with-slot launched>
Launch happened
</component-with-slot>
<!-- 结束代码片段 -->
有关更详细的信息，请参阅：https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668
英文:
Slotted content is not moved to shadowDOM, therefor you can not style it from shadowDOM
Slotted content is reflected to shadowDOM
Slotted (lightDOM) content is styled by the container/level the lightDOM is in, in this case global CSS (see H1 and span styling)
::slotted(span) can only style the skin of lightDOM content, not DOM levels deeper (only span2 is styled)
Style slotted text with an [attribute] on the host element (see launched)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
customElements.define("component-with-slot",class extends HTMLElement{
constructor(){
super().attachShadow({mode:"open"}).innerHTML =
`<style>
*::slotted(span) { padding:2em }
:host([launched]) { color:red; font-weight:bold }
</style>` +
`<slot></slot>`;
}
});
<!-- language: lang-css -->
/* global CSS */
h1 {
border:5px solid blue
}
span {
border:4px dashed red;
}
<!-- language: lang-html -->
<component-with-slot>
<h1>I am slotted <span>span1</span></h1>
<span>span2</span>
</component-with-slot>
<component-with-slot launched>
Launch happened
</component-with-slot>
<!-- end snippet -->
For very detailed info see: https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668
答案2
得分: 0
我找到了另一种方法来为"Launch"添加样式：
sl-tab[active]::part(base) {
color: red;
}
英文:
I figured out how to style Launch with another way using:
sl-tab[active]::part(base) {
color: red;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论