常见问题以及回答

使用自定义元素可能会出现许多你之前没考虑过的问题，这里总结了一些常见问题以及解决方法。

Q: 兼容性

Gem 只保证支持较新版的 Chrome/Firefox/Safari。

Q: 无法直接进行服务端渲染

目前无法提供 SSR。虽然使用 Declarative Shadow DOM 能提供预渲染，但由于他不能序列化 Constructable Stylesheets，所以只能为 SEO 提供一些帮助。

Q: 重复的元素定义

  • 使用 Webpack 的 externals 统一引入依赖
  • 团队中进行命名规范约束

Q: 属性、方法覆盖

下面的方法被覆盖时将导致 GemElement 不能正常工作:

  • GemElement.connectedCallback
  • GemElement.disconnectedCallback
  • GemElement.internals

内部属性和方法建议使用私有字段

Q: 有类似 React.Fragment 的 API 吗？

没有。可以使用 :host { display: contents } 减少样式编写，但是过多的 ShadowRoot 还是会造成硬件资源浪费。

Q: 不可变 Store

在 updateStore 时使用 immutablejs 或者 immuerjs 来保留更新前的 Store。

Shadow DOM 相关

Q: 不能使用 SVG 符号

Q: URL Hash 不能定位，:target 没有效果

元素内部监听 HashChangeEvent，参见 example

Q: document.activeElement 没用了

document.activeElement 可能不再符合你的预期，但是由于 DocumentOrShadowRoot.activeElement 的存在，你还是有机会获取到你想要的结果。

Q: 在 Gem 中如何使用 React/Vue 组件？

  • <slot> 挂载（可能会多层传递）
  • 只使用 Light DOM + CSS in JS
  • 手动挂载，并使用 <link> 加载相应的样式
  • 使用 <gem-frame>，这是一个重方案，不推荐使用