CSS `Custom States` (`:–my-state`) 与 `State Propagation` 在组件树中

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊点新鲜玩意儿，关于 CSS Custom States 和 State Propagation 在组件树里头的那些事儿。保证让你们听完之后，感觉 CSS 也变得眉清目秀起来！

Part 1：啥是 CSS Custom States？它能吃吗？

首先，我们要弄明白什么是 CSS Custom States。简单来说，它就是 CSS 变量的一个升级版，专门用来表示组件的状态。它长这样：:--my-state。是不是有点像 CSS 伪类 :hover、:active？但它可不是浏览器内置的，而是我们自己定义的！

为什么要用它？因为有了它，我们可以更好地控制组件的样式，尤其是在复杂的组件交互中。想想看，如果你想根据组件的某个内部状态来改变它的颜色、大小等等，用传统的 CSS 类名切换是不是感觉有点麻烦？有了 Custom States，一切都变得优雅起来。

咱们先来个简单的例子：

<button id="my-button">点我</button>

<style>
  #my-button {
    background-color: lightblue;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }

  #my-button:--active {
    background-color: darkblue;
    color: white;
  }
</style>

<script>
  const button = document.getElementById('my-button');
  button.addEventListener('mousedown', () => {
    button.toggleAttribute('--active'); // 设置状态
  });

  button.addEventListener('mouseup', () => {
    button.toggleAttribute('--active'); // 移除状态
  });

  button.addEventListener('mouseleave', () => {
    button.removeAttribute('--active'); // 鼠标离开时移除状态
  });
</script>

在这个例子中，我们定义了一个 Custom State :--active，当按钮被按下时，我们使用 JavaScript 设置了 my-button 元素的 --active 属性，从而激活了 :--active 状态，改变了按钮的背景色和文字颜色。鼠标抬起或者移开按钮时，我们移除了这个属性，状态也就消失了。

注意：

• Custom States 的命名必须以 -- 开头。
• Custom States 只能在 JavaScript 中通过 element.toggleAttribute('--my-state')、element.setAttribute('--my-state', 'value') 和 element.removeAttribute('--my-state') 来设置和移除。CSS 本身无法直接改变 Custom States。
• 浏览器支持情况目前还不是很好，需要谨慎使用，并且做好兼容性处理。

Part 2：State Propagation：状态，它会传染！

接下来，咱们聊聊 State Propagation，也就是状态传播。想象一下，你的组件是一个家庭，Custom State 是家庭成员的心情，State Propagation 就是心情的传递。如果爸爸心情不好 :--sad，可能会影响到儿子，儿子也变得 :--sad，这就是状态传播！

在组件树中，一个组件的状态可能会影响到它的子组件，甚至是更深层的子组件。这就是 State Propagation 的核心思想。

那么问题来了，我们如何实现 State Propagation 呢？主要有两种方式：

1. CSS :has() 伪类： 这是 CSS 提供的原生解决方案，它允许我们根据父元素是否包含特定的子元素或状态来选择父元素。
2. CSS 变量 + JavaScript： 通过 JavaScript 监听父组件的状态变化，然后修改 CSS 变量，从而影响子组件的样式。

咱们先看 :has() 的例子：

<div class="parent">
  <button id="my-button">点我</button>
  <div class="child">我是子组件</div>
</div>

<style>
  .parent {
    background-color: lightgray;
    padding: 20px;
  }

  .child {
    background-color: lightgreen;
    padding: 10px;
  }

  .parent:has(button:--active) {
    background-color: lightcoral; /* 当按钮处于 active 状态时，改变父组件的背景色 */
  }

  .child:has(+ .parent:has(button:--active)) { /* 兄弟元素选择器 + :has() */
        background-color: orange;
  }
</style>

<script>
  const button = document.getElementById('my-button');
  button.addEventListener('mousedown', () => {
    button.toggleAttribute('--active');
  });

  button.addEventListener('mouseup', () => {
    button.toggleAttribute('--active');
  });

  button.addEventListener('mouseleave', () => {
    button.removeAttribute('--active');
  });
</script>

在这个例子中，当按钮被按下时，:--active 状态被激活，parent:has(button:--active) 就会匹配，从而改变父组件的背景色。

:has() 的优点：

• 纯 CSS 实现，无需 JavaScript 干预。
• 简单直观，易于理解。

:has() 的缺点：

• 浏览器支持情况相对较新，兼容性需要考虑。
• 只能选择父元素，无法直接修改子元素的样式。
• 选择器性能可能不如直接选择器。
• 复杂的 :has() 选择器可能会降低 CSS 的可读性和维护性。

再来看看 CSS 变量 + JavaScript 的例子：

<div class="parent" style="--active-color: lightblue;">
  <button id="my-button">点我</button>
  <div class="child">我是子组件</div>
</div>

<style>
  .parent {
    background-color: var(--active-color);
    padding: 20px;
  }

  .child {
    background-color: lightgreen;
    padding: 10px;
    background-color: var(--active-color); /* 子组件使用父组件的 CSS 变量 */
  }
</style>

<script>
  const button = document.getElementById('my-button');
  const parent = document.querySelector('.parent');

  button.addEventListener('mousedown', () => {
    parent.style.setProperty('--active-color', 'darkblue'); // 修改 CSS 变量
  });

  button.addEventListener('mouseup', () => {
    parent.style.setProperty('--active-color', 'lightblue'); // 恢复 CSS 变量
  });

  button.addEventListener('mouseleave', () => {
    parent.style.setProperty('--active-color', 'lightblue'); // 恢复 CSS 变量
  });
</script>

在这个例子中，我们使用 CSS 变量 --active-color 来控制父组件和子组件的背景色。当按钮被按下时，我们使用 JavaScript 修改了父组件的 --active-color 变量，从而改变了父组件和子组件的背景色。

CSS 变量 + JavaScript 的优点：

• 灵活性高，可以根据需要修改任意子元素的样式。
• 兼容性较好，CSS 变量的浏览器支持度较高。

CSS 变量 + JavaScript 的缺点：

• 需要 JavaScript 干预，增加了代码的复杂度。
• 可能导致性能问题，频繁修改 CSS 变量可能会影响页面渲染。

Part 3：组件树中的应用场景：让你的组件活起来！

现在，咱们来看看 Custom States 和 State Propagation 在组件树中的一些实际应用场景。

1. 表单验证：

我们可以使用 Custom States 来表示表单字段的验证状态，例如 :--valid、:--invalid。

<div class="form-group">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <span class="error-message"></span>
</div>

<style>
  .form-group {
    margin-bottom: 10px;
  }

  .form-group:--invalid input {
    border-color: red;
  }

  .form-group:--invalid .error-message {
    color: red;
  }
</style>

<script>
  const usernameInput = document.getElementById('username');
  const errorMessage = document.querySelector('.error-message');
  const formGroup = document.querySelector('.form-group');

  usernameInput.addEventListener('input', () => {
    if (usernameInput.value.length < 6) {
      formGroup.setAttribute('--invalid', '');
      errorMessage.textContent = '用户名长度必须大于等于 6 位';
    } else {
      formGroup.removeAttribute('--invalid');
      errorMessage.textContent = '';
    }
  });
</script>

在这个例子中，当用户名长度小于 6 位时，我们设置了 .form-group 元素的 --invalid 属性，从而激活了 :--invalid 状态，改变了输入框的边框颜色和错误信息的颜色。

2. Accordion 组件：

我们可以使用 Custom States 来表示 Accordion 组件的展开状态，例如 :--open。

<div class="accordion">
  <div class="accordion-header">
    <h3>标题 1</h3>
    <span class="arrow"></span>
  </div>
  <div class="accordion-content">
    内容 1
  </div>
</div>

<style>
  .accordion-header {
    background-color: lightgray;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }

  .accordion-content {
    padding: 10px;
    display: none; /* 默认隐藏 */
  }

  .accordion:--open .accordion-content {
    display: block; /* 展开时显示 */
  }

  .accordion:--open .arrow {
    transform: rotate(90deg); /* 展开时旋转箭头 */
  }
</style>

<script>
  const accordionHeader = document.querySelector('.accordion-header');
  const accordion = document.querySelector('.accordion');

  accordionHeader.addEventListener('click', () => {
    accordion.toggleAttribute('--open');
  });
</script>

在这个例子中，当点击标题时，我们设置了 .accordion 元素的 --open 属性，从而激活了 :--open 状态，显示了内容并旋转了箭头。

3. 嵌套组件的状态同步：

假设我们有一个父组件和一个子组件，子组件需要根据父组件的状态来改变自己的样式。

<div class="parent">
  <button id="parent-button">切换状态</button>
  <div class="child">我是子组件</div>
</div>

<style>
  .parent {
    background-color: lightgray;
    padding: 20px;
  }

  .child {
    background-color: lightgreen;
    padding: 10px;
  }

  .parent:--active {
    background-color: lightcoral;
  }

  .child:has(+ .parent:--active) {
      background-color: orange;
  }

  /* 或者使用 CSS 变量 */
  /*.parent {
    --active-color: lightgray;
    background-color: var(--active-color);
    padding: 20px;
  }

  .child {
    background-color: var(--active-color);
    padding: 10px;
  }

  .parent:--active {
    --active-color: lightcoral;
  }*/
</style>

<script>
  const parentButton = document.getElementById('parent-button');
  const parent = document.querySelector('.parent');

  parentButton.addEventListener('click', () => {
    parent.toggleAttribute('--active');
    // 如果使用 CSS 变量，则需要修改 CSS 变量的值
    //parent.style.setProperty('--active-color', parent.hasAttribute('--active') ? 'lightcoral' : 'lightgray');
  });
</script>

在这个例子中，当父组件处于 :--active 状态时，我们使用 :has() 伪类或者 CSS 变量来改变子组件的背景色。

Part 4：一些最佳实践和注意事项：

• 命名规范： Custom States 的命名应该清晰明了，能够准确表达组件的状态。建议使用 kebab-case 命名法，例如 --is-loading、--is-expanded。
• 避免过度使用： Custom States 虽然强大，但也不要滥用。只有在确实需要根据组件的状态来改变样式时才使用它。
• 兼容性处理： 考虑到浏览器支持情况，建议在使用 Custom States 时做好兼容性处理，例如使用 polyfill 或者提供备选方案。
• 性能优化： 频繁修改 Custom States 可能会影响页面性能，建议尽量减少修改的频率，或者使用 requestAnimationFrame 来优化性能。
• 清晰的逻辑： 确保你的状态管理逻辑清晰易懂，避免出现状态混乱的情况。
• 适当的注释： 在代码中添加适当的注释，方便自己和他人理解代码的意图。

Part 5：总结：拥抱 Custom States，让你的 CSS 更上一层楼！

Custom States 和 State Propagation 是 CSS 中非常强大的特性，它们可以帮助我们更好地控制组件的样式，实现更复杂的交互效果。虽然目前浏览器支持情况还不是很好，但随着技术的不断发展，相信 Custom States 会越来越普及。

特性	优点	缺点	适用场景
CSS Custom States	允许我们自定义组件状态，从而更精确地控制样式。	浏览器支持有限，需要 JavaScript 配合设置和移除状态。	表单验证、Accordion 组件、Tab 切换等需要根据组件状态改变样式的场景。
:has() 伪类	纯 CSS 实现状态传播，无需 JavaScript 干预。简单直观，易于理解。	浏览器支持较新，兼容性需要考虑。只能选择父元素，无法直接修改子元素的样式。选择器性能可能不如直接选择器。复杂的选择器可能会降低 CSS 的可读性和维护性。	父组件状态改变需要影响子组件样式的场景，例如父组件 :hover 时改变子组件的背景色。
CSS 变量 + JavaScript	灵活性高，可以根据需要修改任意子元素的样式。兼容性较好，CSS 变量的浏览器支持度较高。	需要 JavaScript 干预，增加了代码的复杂度。可能导致性能问题，频繁修改 CSS 变量可能会影响页面渲染。	需要灵活控制子组件样式，并且对兼容性有较高要求的场景。

希望今天的分享对大家有所帮助！记住，CSS 也是一门艺术，需要不断地学习和实践才能掌握。下次再见！