模板JS |在组件中使用 CSS "+ Selector"答案

【问题标题】：StencilJS | Use CSS "+ Selector " in component模板JS |在组件中使用 CSS "+ Selector"
【发布时间】：2020-01-11 21:10:40
【问题描述】：

我正在使用 StencilJS 开发一个 Web 组件库，但我在使用 CSS + 选择器时遇到了问题。我有一个面包屑 Web 组件，其中将包含多个面包屑项目（以及 Web 组件）。第一项之后的每个面包屑项应添加> smybol 和::before。因此我使用CSS + selector

df-breadcrumb.tsx

export class DFBreadcrumb {

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

df-breadcrumb-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>
      ;
  }
}

test.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

当前输出：Start Library Item

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

【问题讨论】：

标签： css web-component shadow-dom stenciljs

【解决方案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() 是否是最后一个节点。

【讨论】：