FAQ

Using custom elements may cause many problems that you haven't considered before. Here are some common problems and solutions.

Q: Compatibility

Gem only guarantees to support the newer version of Chrome/Firefox/Safari.

Q: SSR

SSR is currently not available. Although the Declarative Shadow DOM can provide pre-rendering, but because he cannot serialize Constructable Stylesheets, so you can only provide some help for SEO.

Q: Repeated element definition

  • Use Webpack's externals to uniformly introduce dependencies
  • Naming convention constraints in the team

Q: Property and method override

The following methods will cause GemElement to not work properly when overridden:

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

Internal properties and methods are recommended to use Private Field

Q: Similar React.Fragment ?

No. You can use :host {display: contents } to reduce style writing, but too much ShadowRoot will still waste hardware resources.

Q: Immutable Store

Use immutablejs or immuerjs in updateStore to keep the Store before the update.

Shadow DOM

Q: SVG symbols

Q: URL Hash cannot be located, :target has no effect

The element internally listen HashChangeEvent, see example

Q: document.activeElement no effect

document.activeElement may no longer meet your expectations, but due to the existence of DocumentOrShadowRoot.activeElement, you still have a chance to get the results you want.

Q: Use React/Vue components?

  • <slot> mount
  • Only use Light DOM + CSS in JS
  • Mount manually and use <link> to load the corresponding style
  • Use <gem-frame>, this is a heavy solution, not recommended