StencilJS | 將宿主樣式應用到組件

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

您可以為此使用css 變量。 查看以下代碼示例：

索引.html

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

我的組件.css

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

在組件的樣式中，您將一個 CSS 變量作為值分配給類[id="red"]的文本顏色。 在您的應用程序中，您現在可以通過設置變量的值來更改顏色。

Answer 2

您的組件有一個“Shadow DOM”，用於封裝所有內容，包括單獨 DOM 中的樣式，因此它幾乎存在以防止您覆蓋它的樣式。

以前有一些“陰影穿透”CSS 指令，如/deep/和::shadow ，但它們已被棄用並且不再起作用。

所以這就是它應該的樣子。

現在的解決方法：

• 創建一個共享的 css 文件並將其包含在您的組件和應用程序中 - 或者
• 使用 shadowRoot 屬性從主機應用程序中使用 javascript 設置樣式：

var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = '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