角度2在提取组件后丢失了样式

Question

我有以下项目结构：

todo-list-item.component.css内容：

.todo-item {
    padding: 1em;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,.1);
}

.todo-item .checkbox {
    margin-right: .25em;
}

.todo-item.completed .title {
    text-decoration: line-through;
}

.todo-item.completed .title,
.todo-item.completed .material-icons {
    color: lightgray;
}

.todo-item input {
    flex: 1;
    margin-right: 1rem;
}

.todo-item .actions {
    margin-left: auto;
    /* opacity: 0;*/
    transition: all .2s;
}

例如让我们研究最后一种风格：

.todo-item .actions {
    margin-left: auto;
    /* opacity: 0;*/
    transition: all .2s;
}

当我打开页面并从控制台执行collowing命令时

document.querySelector(".todo-item .actions")

返回

<div _ngcontent-dny-2="" class="actions">
    <button _ngcontent-dny-2="" class="delete icon">
        <i _ngcontent-dny-2="" class="material-icons">delete</i>
    </button>
</div>

但是当我在树中打开这个dom元素时 - 我没有看到提到的样式：

请解释我做错了什么？

P.S。

现在我有这样的css文件：

:host {
    padding: 1em;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.checkbox {
    margin-right: .25em;
}

:host(.completed) .title {
    text-decoration: line-through;
}

:host(.completed) .title,
:host(.completed) .material-icons {
    color: lightgray;
}

:host input {
    flex: 1;
    margin-right: 1rem;
}

:host .actions {
    margin-left: auto;
    /* opacity: 0;*/
    transition: all .2s;
}

但部分样式目前尚未绑定。

P.S。

溶液：

:host {
    padding: 1em;
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

:host .checkbox {
    margin-right: .25em;
}

:host-context(.completed) .title {
    text-decoration: line-through;
}

:host-context(.completed) .title,
:host-context(.completed) .material-icons {
    color: lightgray;
}

:host input {
    flex: 1;
    margin-right: 1rem;
}

:host .actions {
    margin-left: auto;
    /* opacity: 0;*/
    transition: all .2s;
}

Answer 1

您应该使用.todo-item来引用组件本身，而不是组件的css文件中的:host。如果您使用.todo-item，则会查找类别为todo-item INSIDE 的元素。这就是它与组件本身不匹配的原因。尝试将.css文件中的.todo-item的每个实例更改为:host。