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;
  }
}