css三新增的微元素选择器

CSS三新增了一些微元素选择器，分别是“::slotted()”，“::part()”和“::theme()”。下面分别介绍一下这三个选择器的用法和特点。

::slotted() 

它是用于选取插入到slot元素的内容的。在组件中通过使用插槽，可以将外部的html元素插入到组件内部。此时就可以用“::slotted()”来选取插入到插槽中的元素，进而对其进行样式调整。下面是一个例子：

/* 组件样式 */
:host{
    display: block;
}
::slotted(h3){
    color: red;
    font-size: 20px;
} 

通过该样式，我们可以定义当插入的元素为"h3"标签时，颜色为红色，字体大小为20像素。

::part() 

它是用于选取组件内特定部分的元素，这些部分是经过用户界面的设计而命名的。在组件中，可以将其标记为“part”，将其用于定义组件的样式属性，使用“::part()”便可以选取到该部分的元素，实现样式调整。下面是一个例子：

/* 组件内 'my-button' 标记的元素样式 */
:host([type='primary']) [part=my-button]{
    background: blue;
    color: white;
    border: none;
} 

通过该样式，我们可以定义当组件的type属性为"primary"时，通过“::part()”选取到part属性为"my-button"的元素，背景色为蓝色，字体颜色为白色，边框为空。

::theme() 

它是用于选取组件中特定元素的主题部分。在组件中，可能存在一个默认的主题，同时用户也可以通过更改主题来替换默认的主题。此时，我们可以使用“::theme()”来选取这个组件的主题部分，实现样式调整。下面是一个例子：

/* 组件主题的样式 */
:host([theme='dark']) ::theme(h1){
    color: white;
    font-size: 25px;
    text-align: center;
} 

通过该样式，我们可以定义当组件的主题为"dark"时，通过“::theme()”选取到"h1"元素，颜色为白色，字体大小为25像素，居中对齐。