时间戳

首页 > 解决方案 > litelement - 在开槽元素中设置嵌套元素的样式

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

问题描述

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

我无法将样式应用于嵌套在开槽中的元素。例如，在此代码段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>最后一个自定义元素中的元素。如果它不像 2nd 那样嵌套<content-card>，那就没关系。

我错过了什么，以便我可以将相同的样式应用于<a>元素，而不管它在自定义元素的插槽中的什么位置？

标签： javascriptcssweb-componentlit-element

解决方案

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

因此，您不能使用它来设置嵌套元素的样式。在您的情况下，<a>样式将是主文档中定义的样式（因为<a>在轻 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>

推荐阅读