LitElement从不同的文件创建DOM元素并控制CSS

uttx8gqw 于 2022-12-27 发布在其他

关注(0)|答案(1)|浏览(127)

希望你一切都好。
我有一个lit元素。我动态添加了一个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？
谢啦，谢啦

css

来源：https://stackoverflow.com/questions/74903180/litelement-create-dom-element-and-control-css-from-a-different-file

1条答案

按热度按时间

5n0oy7gb1#

可以根据在元素上设置的属性更改样式。
设置元素的属性：

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>

为此，您仍需要在top-bar组件中使用以下CSS：

.host {
    display: none;
}

.host[shown] {
    display: block;
}

赞(0）回复(0）举报 2022-12-27

我来回答

LitElement从不同的文件创建DOM元素并控制CSS

1条答案

相关问题

热门标签

最新问答