litelement - 在开槽元素中设置嵌套元素的样式答案

【问题标题】：litelement - styling nested elements within slotted elementslitelement - 在开槽元素中设置嵌套元素的样式
【发布时间】：2019-12-11 10:50:53
【问题描述】：

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

我无法将样式应用于嵌套在开槽内的元素。例如，在这个 sn-p https://codepen.io/aver-mimas/pen/qePZXY 中，我正在使用这个元素的 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> 元素，而不管它在自定义元素的插槽中的什么位置？

【问题讨论】：

接缝不应用 CSS 样式，如果它在 <p> 元素中。当您删除 <p> 时，它正在工作。所以，这是LitElement 的弱点

标签： javascript css web-component lit-element

【解决方案1】：

::slotted() 将仅适用于在 <slot> 中分配的顶级元素。

因此，您不能使用它来设置嵌套元素的样式。在您的情况下，<a> 样式将是主文档中定义的样式（因为 <a> 位于 light DOM 中，因此它继承自全局 CSS 样式）。

然后解决方案是在主文档中为<a> 定义CSS。您可以将其插入到 <head> 元素中，或者在 light DOM 级别。要将特定样式限制为自定义元素内容，请在前面添加其名称：

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

customElements.define( 'custom-card', class extends HTMLElement {
    connectedCallback() {
        this.insertAdjacentHTML( 'beforeBegin', `<style> custom-card a { color: red } </style>` )
        this.attachShadow( { mode: 'open' } )
            .innerHTML = `<div><slot></slot></div>`
    }
} )

<custom-card>
  <a href>First level link</a>
  <p><a href>Link inside a paragraph</a></p>
</custom-card>

【讨论】：

感谢您的解释和示例。 2个问题。 connectedCallback() 函数内部的 this.attachShadow 是什么？看起来我可以在没有它的情况下获得样式效果。而且，这会在文档中为每个 custom-card 元素添加一个 style 元素。有没有更有效的方法来处理这种情况？使用插槽的目的是将所有内容封装在自定义元素中，并对客户端隐藏实现细节。问题的根源是否来自使用插槽？
@aver 1. 我在示例中使用了 attachShadow，因为我使用 vanilla JavaScript 而不是 LitElement（为了简单起见，因为它没有链接）。如果你不使用 Shadow DOM，你当然可以获得样式效果（并且 ::slotted() 和无论如何都不起作用）。 2. 不。是的，问题的根源来自唱槽。 ::slotted() 只能针对单个元素（而不是子元素）
再次感谢您的澄清。我现在唯一的问题是custom-card 元素的每个实例的重复style 元素。
@aver 或者，您可以在标题中仅插入一个样式元素（从 custum 元素定义之外）