Javascript litelement-设置开槽元素中嵌套元素的样式

我正在使用litelement创建一个简单的自定义元素。该元件将通过插槽接收各种输入。在这一点上，我甚至没有使用命名插槽

我在将样式应用于嵌套在槽中的元素时遇到问题。例如，在这段代码中，我使用了此元素的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>

这是一段

卡片2的内容

还有更多

card3的内容

我的同僚们都是精英。铜酸盐的动物，它的生活质量如何？丘比特酸累积性痣，劳丹蒂姆·维利特的腐败。奥迪奥·泰米布斯·奈斯奎斯

我似乎无法将背景/颜色样式应用于最后一个自定义元素中的

元素。如果它没有像第二个

中那样嵌套，那么就可以了

我缺少什么，以便我可以将相同的样式应用于

元素，而不管它在自定义元素的插槽中的什么位置？

：：slotting（）

将仅应用于在

中指定的顶级元素

因此，不能使用它设置嵌套元素的样式。在您的情况下，

如果在

元素中，则不应用CSS样式。当您删除

时，它正在工作。因此，这是

LitElement

的弱点，感谢您的解释和示例。2个问题。

connectedCallback（）

函数内部的

this.attachShadow

是什么？看起来我不用它也能得到风格效果。并且，这会在文档中为每个

自定义卡
元素添加
样式
元素。有没有更有效的方法来处理这种情况？使用插槽的目的是封装自定义元素中的所有内容，并对客户端隐藏实现细节。问题的根源是使用插槽吗？@aver 1。我在示例中使用了attachShadow，因为我使用了vanilla JavaScript而不是LitElement（为了简单起见，并且因为它没有链接）。如果不使用shadowdom，当然可以获得样式效果（and:：slotting（），但无论如何都不起作用）。2.否。是的，问题的根源在于：slotted（）只能针对单个元素（而不是子元素），再次感谢您的澄清。我现在唯一的问题是
自定义卡
元素的每个实例的重复
样式
元素。@aver或者，您可以在标题中只插入一个样式元素（从custum元素定义的外部）
<style>
    custom-card a {
        color: white;
        background-color: red;
    }
</style>