StencilJS

Question

我正在使用 Stencil JS 为我正在构建的微型 front-end 编写组件。我有一个 <dashboard-container>，顾名思义，它包含我拥有的所有其他组件。

我正在尝试更改 index.html 正文的背景颜色，然后让所有其他元素、组件保持自己的样式。

问题是，如果我尝试将 background-color: red 应用到我的 <dashboard-container>，其余 children 也会继承背景色。

我希望如果我将背景颜色应用到 parent 元素，children 会保留他们自己的样式，但它不会那样工作。

如何在没有 children 继承的情况下设置组件样式？

我是这样设置的：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'lh-dashboards-container',
  styleUrl: 'lh-dashboards-container.scss',
  scoped:true

})
export class LhDashboardsContainer {
  render() {
    return (
      <div class="lh-dashboards-container">
        <lh-dashboards-navigation></lh-dashboards-navigation>
        <lh-dashboards-cohort-finder></lh-dashboards-cohort-finder>
      </div>
    );
  }
}

所以，如果我执行以下操作：

//lh-dashboards-container.scss
.lh-dashboards-container {
    background-color:red;
}

每个 child 组件及其元素的背景都将更改为红色。

Answer 1

您可以在子元素上添加 all: initial;，但它会指定所有元素的属性都应更改为其初始值。

如果需要，最好为子项设置样式，覆盖从父项继承的样式。

您可以阅读更多关于 all here。

StencilJS - 为什么某些样式（例如 background-color）在设置容器样式时适用于所有元素？

StencilJS - Why do some styles (e.g., background-color) apply to all elements when styling container?

html

css

shadow-dom