5

stencilJS コンポーネントが含まれている Web サイトからスタイルを適用しようとしていますが、方法がわかりません。

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

ステンシル コンポーネントから要素にスタイルを適用したいと考えています。これは可能ですか？

4

3 に答える 3

1

コンポーネントには「Shadow DOM」があります。これは、スタイルを含むすべてを別の DOM にカプセル化する目的で使用されるため、スタイルのオーバーライドを防ぐためにほとんど存在します。

/deep/以前は、や などの「シャドウ ピアシング」CSS ディレクティブがいくつかありましたが::shadow、それらは廃止され、機能しなくなりました。

ですから、それが本来あるべき姿です。

回避策は次のとおりです。

  • 共有 css ファイルを作成し、それをコンポーネントとアプリケーションの両方に含める - または
  • shadowRoot プロパティを使用して、ホスト アプリケーションから JavaScript を使用してスタイルを設定します。
var div = document.querySelector('#comp').shadowRoot.querySelector('div#red');
div.style['color'] = 'red';
于 2019-01-18T15:02:40.897 に答える