css制作web组件
CSS 制作 Web 组件
使用 Shadow DOM 封装样式
Shadow DOM 允许将组件的样式和行为封装在一个隔离的 DOM 树中，避免外部样式污染。通过 attachShadow 方法创建 Shadow DOM，并在其中定义组件的 HTML 和 CSS。
<template id="my-component">
<style>
.component {
color: blue;
font-family: Arial;
}
</style>
<div class="component">
<slot></slot>
</div>
</template>
<script>
class MyComponent extends HTMLElement {
constructor() {
super();
const template = document.getElementById('my-component');
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-component', MyComponent);
</script>使用 CSS 变量实现主题化
CSS 变量（自定义属性）可以动态修改组件的样式，便于主题切换或用户自定义。在组件内部使用 var() 引用变量，并通过宿主元素的样式或 JavaScript 动态更新。
:host {
--primary-color: #42b983;
--text-size: 16px;
}
.component {
color: var(--primary-color);
font-size: var(--text-size);
}通过 :host 选择器控制宿主样式
:host 选择器用于定义组件根元素的样式，支持状态伪类（如 :hover）和条件样式（通过 :host-context 匹配外部环境）。
:host {
display: block;
padding: 10px;
}
:host(:hover) {
background-color: #f0f0f0;
}
:host-context(.dark-theme) {
background-color: #222;
}使用 ::part 暴露可样式化部分
part 属性允许外部通过 ::part() 选择器覆盖组件内部特定元素的样式，实现有限度的样式穿透。
<div part="header">Header</div>外部 CSS 可以这样覆盖：
my-component::part(header) {
font-weight: bold;
}响应式设计适配
通过媒体查询或容器查询（需浏览器支持）使组件适应不同布局。容器查询需使用 @container 规则。
.component {
width: 100%;
}
@media (min-width: 600px) {
.component {
width: 50%;
}
}
@container (min-width: 300px) {
.component {
padding: 20px;
}
}动画与过渡效果
使用 @keyframes 或 transition 添加交互反馈。优先使用 CSS 动画而非 JavaScript 以提升性能。
.component {
transition: transform 0.3s ease;
}
.component:active {
transform: scale(0.95);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.component {
animation: fadeIn 0.5s forwards;
}性能优化建议
避免通配选择器或深层嵌套，减少样式计算成本。使用 will-change 提示浏览器优化渲染。
/* 避免 */
.component * {
margin: 0;
}
/* 推荐 */
.component-title {
margin: 0;
}
.animated-element {
will-change: transform;
}
