javascript 如何在开槽元素中设置嵌套元素的样式？

carvr3hs 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(165)

我正在使用Lit Element创建一个简单的自定义元素。这个元素将通过插槽接受各种输入。我甚至没有使用命名插槽。
我在对一个嵌套在slot中的元素应用样式时遇到了麻烦。例如，在this snippet中，我使用了这个元素的3个不同变体，如下所示：

<content-card>
  <p>This is a paragraph</p>
</content-card>

<content-card heading="Card2 title" background="grey">
    <p>Content of Card 2</p>
    <a href="#">Terms of Use</a>
    <p>There's more</p>
</content-card>

<content-card heading="Another card with long title & content" background="dark">
  <p>Content of card3. <a href="#">Policy</a></p>
  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nesciunt cupiditate, nam vel ad sit maxime soluta? Molestias accusamus cupiditate, dolor corrupti id pariatur laudantium velit. Odio temporibus nesciunt officiis!</p>
</content-card>

我似乎无法将背景/颜色样式应用到最后一个自定义元素中的<a>元素。如果它没有像第二个<content-card>那样嵌套，那么就可以了。
为了能够对<a>元素应用相同的样式，而不管它在定制元素槽中的位置，我遗漏了什么？

JavaScript

来源：https://stackoverflow.com/questions/57332754/how-can-i-style-nested-elements-within-slotted-elements

2条答案

按热度按时间

oxf4rvwz1#

::slotted()将仅应用于在<slot>中分配的顶级元素。
因此你不能用它来设计嵌套元素的样式。在你的例子中，<a>样式将是主文档中定义的样式（因为<a>在light DOM中，所以它继承自全局CSS样式）。
解决方案是在主文档中定义<a>的CSS。您可以将其插入<head>元素中，或在轻量级DOM级别插入。要将特定样式限制为自定义元素内容，请在以下内容之前添加其名称：

<style>
    custom-card a {
        color: white;
        background-color: red;
    }
</style>

x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-01

yqyhoc1h2#

我也遇到了同样的问题。不过，我找到了两个变通办法：

解决方法1 -使用Javascript设置样式

(1)使用@queryAssignedElements从JavaScript访问插槽元素（请参见https：//lit.dev/docs/components/shadow-dom/#query-assigned-nodes）
(2)对于每个开槽元素，解析其dom树并使用javascript样式化子节点（例如childelement.style.backgroundColor = '#ff0';）

解决方法2 -将分时段HTML复制到另一个Div

(1)使用@queryAssignedElements从JavaScript访问插槽元素（请参见https：//lit.dev/docs/components/shadow-dom/#query-assigned-nodes）
(2)对于所考虑的每一个slotted元素，将其outerHTML复制粘贴到另一个空div中，放置在它旁边。
(3)由于这些最初为空的div不是来自插槽，因此可以为它们设置静态css规则。
(4)在复制粘贴到相邻div完成后清空插槽。
简而言之，使用槽作为入口。

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 如何在开槽元素中设置嵌套元素的样式？

2条答案

相关问题

热门标签

最新问答