css制作web组件
使用CSS制作Web组件的方法
基础样式封装
通过CSS的类选择器或属性选择器为Web组件定义样式，确保样式隔离。例如：
.my-component {
padding: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
}Shadow DOM实现样式隔离
通过Shadow DOM将组件的样式与外部隔离，避免全局样式污染：
class MyComponent extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
:host { display: block; }
.inner { color: red; }
</style>
<div class="inner">内容</div>
`;
}
}
customElements.define('my-component', MyComponent);CSS变量定制主题
通过CSS变量（Custom Properties）实现主题定制能力：
:host {
--primary-color: #6200ee;
--padding: 8px;
}
.component-part {
color: var(--primary-color);
padding: var(--padding);
}响应式设计
使用媒体查询确保组件适配不同屏幕尺寸：
@media (max-width: 600px) {
:host {
font-size: 14px;
}
}动画与交互效果
通过CSS过渡和动画增强交互体验：
.button {
transition: transform 0.2s ease;
}
.button:active {
transform: scale(0.95);
}BEM命名规范
采用BEM（Block-Element-Modifier）规范管理样式类名：
.card__header--highlighted {
background-color: yellow;
}伪类与状态管理
利用伪类处理组件不同状态：
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}第三方工具链集成
结合PostCSS或Sass等预处理工具增强CSS能力：
.component {
&__part {
@include responsive-font;
}
}
