LitElement 從不同的文件創建 DOM 元素並控制 CSS

Question

一切順利。

我有一個點亮的元素。 我動態添加一個 DOM 元素：

        this.dropDownElement = document.createElement('div');
        const clone = this.topBarElement.shadowRoot.querySelector('.parentContainer').cloneNode(true);
        clone.style.display = 'block';
        this.dropDownElement.appendChild(clone);
        this.topBarElement.parentNode!.appendChild(this.dropDownElement);

問題是我無法從我的樣式文件中更改此元素的 CSS：

import styles from './styles/CoreAppframeTopbar.scss';

但是，我可以內聯 CSS 樣式。

如何從我創建的已經定義的 CSS 文件中控制 CSS？

謝謝

Answer 1

您可以根據您在元素上設置的屬性更改樣式。

在元素上設置屬性：

 this.topBarElement.setAttribute("shown", true);

在您的元素內，根據屬性值更改樣式：

 .host { display: none; }.host[shown] { display: block; }

這相當於直接在 HTML 標記中添加屬性：

 <top-bar?shown=${this._showTopBar}> <item> </item> <item> </item> <item> </item> </top-bar>

為此，您仍然會在頂部欄組件中包含以下 CSS：

 .host { display: none; }.host[shown] { display: block; }