1

私は初心者です。ここで使用されている用語は適切に適用されていない可能性があります。

私のアプリには 3 つのコンポーネントがあります。Project Clarityからの1 つの外部コンポーネントclr-datagrid

    <body>

    <app-root>

    <app-searchform> 
      <ss-multiselect-dropdown> 
        external library for making Dropdown Multiselect with bootstrap CSS 
     </ss-multiselect-dropdown>
   </app-searchform>

    <app-searchresult> 
        <clr-datagrid> external component for displaying result list </clr-datagrid>
   </app-searchresult>
       </app-root>

     </body>

検索結果コンポーネントでは、

@Component({
  selector: 'app-searchresult',
  templateUrl: './searchresult.component.html',
  styleUrls: ['./searchresult.component.css',
    '../../../node_modules/clarity-icons/clarity-icons.min.css',
    '../../../node_modules/clarity-ui/clarity-ui.min.css'
  ],
  encapsulation: ViewEncapsulation.Emulated
})

問題は、

ViewEncapsulation を使用する場合。Emulated、clarency-icons.min.css'、clarency-ui.min.css は、ネストされたコンポーネント/カスタム要素には適用されません。

ViewEncapsulation を使用する場合。ネイティブ、Chrome および Opera ブラウザでのみ正常に動作します。ただし、IE/Firefox/Safari にはありません。

ViewEncapsulation を使用する場合。None、正常に動作しますが、CSS がブリードアウトし、searhform cmp スタイルに影響します。

問題はShadow DOMに関するものであり、ChromeのみがShadow DOMをサポートし、他のものはそうではないことをオンラインで読んだことから私が理解したこと。webcomponents ポリフィルを使用しようとしました

<script src="../../../node_modules/webcomponents.js/webcomponents-hi-sd-ce.js"></script>index.html (正しい方法ではなかったかもしれません)。

コンポーネントにのみ明確なcssとアイコンを適用し、アプリの他の部分に影響を与えないようにするにはどうすればよいでしょうか?

4

0 に答える 0