css - 模具 |在组件中使用 CSS "+ Selector "

Question

我正在使用 StencilJS 开发一个网络组件库，但我在使用 CSS + 选择器时遇到了问题。我有一个 Breadcrumb web 组件，它将包含多个 breadcrumb 元素(以及 web 组件)。第一项之后的每个面包屑项都应添加 > smybol 和 ::before。因此我使用 CSS + selector

df-面包屑.tsx

export class DFBreadcrumb {

  render() {
    return <ol class="breadcrumb">
      <slot></slot>
    </ol>
      ;
  }
}

df-面包屑-item.tsx

export class DFBreadcrumbItem {
  /**
   * Link
   */
  @Prop() link: string;


  render() {
    return this.link ? <li class="breadcrumb-item"><a href={this.link}><slot></slot></a></li> :
      <li class="breadcrumb-item"><slot></slot></li>
      ;
  }
}

测试.html

<df-breadcrumb>
  <df-breadcrumb-item link="#">Start</df-breadcrumb-item>
  <df-breadcrumb-item link="#">Library</df-breadcrumb-item>
  <df-breadcrumb-item>Item</df-breadcrumb-item>
</df-breadcrumb>

我的CSS规则

.breadcrumb-item+.breadcrumb-item:before {
    display: inline-block;
    padding-right: .5rem;
    color: #6c757d;
    content: ">";
}

预期输出:Start > Library > Item

当前输出:开始库元素

我认为这是行不通的，因为 Stencil 封装了我的 li 标签，而它们的直接父级不是 ol。我阅读了一些有关使用 :host() 伪类的内容，但无法使其正常工作。我还在我的组件中设置了 shadow: false。

Answer 1

你是对的，问题是 df-breadcrumb-item 元素。

一个简单的替代方法是将 CSS 应用于 df-breadcrumb-item 元素:

df-breadcrumb-item + df-breadcrumb-item:before {
    display: inline-block;
    color: #6c757d;
    content: ">";
}

或者，您可以将箭头添加到 df-breadcrumb-item 组件内的 .breadcrumb-item 元素，这取决于属性或通过手动检查是否@Element() 是最后一个节点。