::part()为Shadow DOM中具有匹配part属性的任何元素添加样式

2020-07-09258次阅读csshtml5css模块

Shadow DOM 为Web组件中的DOM和CSS提供了封装,保持与主文档的DOM保持分离。::part()则可以为Shadow DOM中具有匹配part属性的任何元素添加样式。

HTML

<template id="tabbed-custom-element">
<style type="text/css"> 
*, ::before, ::after {
  box-sizing: border-box; 
  padding: 1rem;
}
:host {
  display: flex;
}
</style> 
<div part="tab active">Tab 1</div> 
<div part="tab">Tab 2</div> 
<div part="tab">Tab 3</div>
</template>

<tabbed-custom-element></tabbed-custom-element>

CSS

tabbed-custom-element::part(tab) {
  color: #0c0c0dcc;
  border-bottom: transparent solid 2px;
}

tabbed-custom-element::part(tab):hover {
  background-color: #0c0c0d19;
  border-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):hover:active {
  background-color: #0c0c0d33;
}

tabbed-custom-element::part(tab):focus {
  box-shadow: 
    0 0 0 1px #0a84ff inset, 
    0 0 0 1px #0a84ff,
    0 0 0 4px rgba(10, 132, 255, 0.3);
}

tabbed-custom-element::part(active) {
  color: #0060df;
  border-color: #0a84ff !important;
}

 

上一篇: 使用text-shadow创建3D文本并实现动画效果  下一篇: 拥抱Grid网格布局基本概念之Grid容器  

::part()为Shadow DOM中具有匹配part属性的任何元素添加样式相关文章