Question

我正在尝试从包含stencilJS组件的网站上应用样式...但是不知道如何。

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

@Component({
  tag: 'menu-component',
  styleUrl: 'menu-component.css',
  shadow: true
})

export class MyComponent {

 render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p id="red">This is JSX!</p>
      </div>
    );
  }
}

像这样包含组件：

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src='https://unpkg.com/component@0.0.2/dist/mycomponent.js'></script>
<my-component></my-component>

在我的main.css文件中，我有类似以下内容：

#red{
    color: red;
}

我希望将样式应用于模板组件中的元素。这可能吗？

Answer 1

您的组件具有一个“ Shadow DOM”，其目的是将所有内容（包括样式）封装在单独的DOM中，因此几乎存在防止您覆盖其样式的问题。

以前，有一些“阴影穿透”的CSS伪指令，例如/deep/和::shadow，但是它们已被弃用并且不再起作用。

这差不多应该是这样。

现在可以解决方法：

创建一个共享的CSS文件，并将其包含在您的组件和应用程序中-或
使用shadowRoot属性从宿主应用程序中使用javascript设置样式：

var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';

Answer 2

您可以使用css variables。查看以下代码示例：

index.html

<my-component style="--text-color:red;"></my-component>

my-component.css

#red {
    color: var(--text-color, black);
}

在组件的样式中，将CSS变量作为值分配给类[id="red"]的文本颜色。在您的应用程序中，您现在可以通过设置变量的值来更改颜色。

Answer 3

您应该能够在样式表中使用:host伪选择器来应用主机级样式：

:host {
    style: value
}

您可以轻松引入@stencil.sass作为样式表，请在此处链接：https://github.com/ionic-team/stencil-sass/blob/master/readme.md

这将为您的模板样式提供更多功能。

编辑：

我误解了，现在看到您想在组件外部进行操作。您可以在Web组件中提供<slot />元素，并从Web组件DOM外部添加样式特殊的元素。链接到这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot

StencilJS |将宿主样式应用于组件

3 个答案: