时间戳

首页 > 解决方案 > CSS :host 与 Web 组件中的 CSS 类

css - CSS :host 与 Web 组件中的 CSS 类

问题描述

使用普通的 React/Vue 组件，我通常会创建一个自定义 CSS 类并使用它来设置组件的样式，如下所示：

<div class="foo">
  ...
</div>

.foo {
}

对于 Web 组件，还有一个额外的选项可以使用:hostpsuedo-selector。我知道它可用于将样式应用于 Web 组件 HTML 元素本身。

<div class="foo">
  ...
</div>

.foo {
}
:host {
}

什么时候应该使用:host自定义 CSS 类.foo？

标签： cssweb-component

解决方案

您没有提到的一个重要部分是 React（和其他框架）在构建步骤中重写了您的所有类名，以创建“唯一”类名。
React 不像 shadowDOM 那样限定 CSS。

下面的答案是针对带有shadowDOM 的 Web 组件；
请注意，shadowDOM也可以附加到常规 DOM 元素。同样的答案适用。

  • :host指你的...宿主...Web Component DOM元素：<my-element>
    说白了，你可以把它比作html,head,body全局CSS中的，它是容器元素，里面
    的CSS并不（必须）知道元素名称 my-element

  • 类（或您知道的任何 CSS 选择器）样式 Web 组件内容
    ，或者，如果您不使用 shadowDOM，它们会样式化您的整个文档，
    因为与框架不同，类名称在构建步骤中不会更改为“唯一”。

  • 并学习<slot> 行为：
    ::slotted CSS selector for nested children in shadowDOM slot

<style>
 .foo {
   border:1px solid red; /* CSS not applied to elements in shadowDOM */
   font: 30px Arial; /* for UX consistancy, font styles DO style shadowDOM */
 }
</style>
<span class="foo">
  <my-element>Hello</my-element>
  Web Components
  <my-element pink>World</my-element>
</span>

<template id="MY-ELEMENT">
  <style>
    :host {
        display:inline-block;
        background:lightgreen;
    }
    :host([pink]) { background:hotpink }
    .foo { font-weight:bold; /* does NOT style anything outside this shadowDOM  */ }
  </style>
  <slot class="foo"></slot>
</template>

<script>
  customElements.define('my-element', class extends HTMLElement {
    constructor() {
      super().attachShadow({mode: 'open'})
             .append(document.getElementById(this.nodeName).content.cloneNode(true));
    }
  });
</script>

推荐阅读