自定义元素中插槽元素的font简写属性失效问题排查

• 问题现象：当元素被放置在自定义元素的插槽（slot）中时，font简写属性无法生效。该简写在自定义元素外可正常工作，拆分成长写属性（如font-weight、font-size、line-height、font-family）后应用于插槽元素也能正常生效。
• 影响范围：Firefox、Chrome/Edge及Safari浏览器均存在此问题，需明确：问题针对的是自定义元素内的插槽元素，而非其Shadow DOM中的元素。

排查相关信息 #

• 以下为用于本地化排查的测试代码（未复现问题）：

  <style>
      h2{
          font: 700 3.125rem/1.12 sans-serif;
      }
  </style>
  <link rel="stylesheet" href="stylesheet.css">
  <custom-element>
      <div slot="example-slot">
          <h2>Example H2</h2>
      </div>
  </custom-element>
  

• 文档搜索情况：查阅MDN及各类W3C文档，未找到直接相关内容；谷歌及相关平台搜索结果多为简写格式错误（如遗漏font-family）或Shadow DOM样式教程，推测可能是关键词组合不当，需方向指引。
• 有一系列截图展示问题。
• 排查进展：
  • 经其他用户提示，在干净的fiddle中测试后怀疑转译器可能造成干扰，待隔离问题后会更新进展。
  • 在其他网站使用完整压缩转译后的代码复现问题，排除转译器根源，推测问题可能来自NextJS。已通过DOM就绪后动态导入代码解决document is undefined问题：

    useEffect(() => {
        import('local-package/dist/components');
    }, []);
    

当前处理方案 #

临时方案为将font简写拆分为长写属性，该方法无问题且更节省时间。若找到font简写失效的完整解决方案会反馈。

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