styled-components传属性给HTML/Web组件时使用何种命名大小写格式？

当你以kebab-case（短横线分隔命名）格式给styled-components创建的组件传属性时，框架不会主动将属性转换为Camel case（驼峰命名）、Pascal case（帕斯卡命名）或snake case（蛇形命名）格式，会原样保留kebab-case格式透传到最终渲染的DOM节点，具体规则分两类场景：

• 原生HTML元素场景（比如示例中通过styled('div')创建的组件）：
  对符合HTML规范的标准属性、data-*自定义数据属性、aria-*无障碍属性，styled-components会完全保留你传入的短横线格式，直接挂载到渲染出的DOM节点上，不会做任何大小写改写。
• 自定义Web Component场景（比如示例中通过styled('web-component')创建的组件）：
  针对自定义元素，styled-components不会做内置的属性名校验和格式转换，无论你传入的是标准属性还是自定义业务属性，只要是kebab-case格式传入，都会原封不动挂载到自定义元素上，完全适配Web Component生态常用短横线命名属性的开发习惯。

你给出的示例代码最终渲染结果和原始传入格式完全一致：

<!-- 传入kebab-case属性后渲染的div -->
<div data-justin='my name' class='xxx' data-selected="false"> </div>

<!-- 传入kebab-case属性后渲染的Web Component -->
<web-component a-long-attr-justin='my name' tons-of-data-selected="false" class="xxx"> </web-component>

注意：不要把这个逻辑和React JSX原生的属性转换规则混淆。React本身只会对内置识别的标准HTML属性做驼峰到HTML规范格式的转换，低版本React会直接过滤掉原生标签上未识别的kebab-case自定义属性，但styled-components在底层做了适配，会保证这类属性按你编写的原始格式透传，既不会被丢弃，也不会被强制转换为其他命名格式。

内容的提问来源于stack exchange，提问作者Justin Meskan