Understanding when to use what.

[trusktr]

I think I see: I need this transform in case document-register-element isn't loaded, because in that case the transpiled code won't work with native CE v1 even if we had followed the caveat workarounds. Is this right?

It may be helpful for people to have the following details written somewhere:

• In which cases using only document-register-element is fine
  • for libraries
  • for apps
  • How does this limit people's abilities to extend classes in this case
• In which cases using only transform-builtin-classes is fine
  • for libraries
  • for apps
  • How does this limit people's abilities to extend classes in this case
• In which cases to use both transform-builtin-classes and document-register-element together
  • for libraries
  • for apps
  • How does this limit people's abilities to extend classes in this case

It's been hard to piece everything together by trial and error over the course of a few days and lots of fiddling, so basically I may have forgotten some details, and you probably know it all best.

[trusktr]

I can try to fill what I think I might know:

• In which cases using only document-register-element is fine
  • for libraries:
  • when a transpiled library is used in an app that expects the library to polyfill missing browser features
  • for apps
  • when using libraries that are transpiled (hopefully the right way) but that don't come with polyfill.
  • How does this limit people's abilities to extend classes in this case
  • ?
• In which cases using only transform-builtin-classes is fine
  • for libraries
  • when a transpiled library is expected to be used in an app where native CE v1 exists with no polyfill
  • for apps
  • ?
  • How does this limit people's abilities to extend classes in this case
  • library author must tell extending author to use transform-builtin-classes, and for mixing they must use the form SomeMixin(class extends BuiltinClass)
  • ?
• In which cases to use both transform-builtin-classes and document-register-element together
  • for libraries
  • when transpiled library is expected to be used with native or polyfilled CE v1.
  • for apps
  • when the app is responsible for transpiling library code
  • ?
  • How does this limit people's abilities to extend classes in this case
  • ?

[WebReflection]

When should I use document-register-element ?

Whenever you need a customElements polyfill.

When should I use babel-plugin-transform-builtin-classes ?

Whenever you transpile classes that extends native builtins. Native builtins are Array, HTMLElement, String etcetera.

---

Both projects have nothing to do with each other so when you need custom elements and you need to extend builtin classes, you inevitably need both if you transpile code and your target need a polyfill.