Stencil Tidbits

Gotchas

• [Testing] There are discrepancies between Puppeteer and what Stencil's testing tooling gives you. See https://github.com/ionic-team/stencil/tree/master/src/testing/puppeteer
• [TypeScript] Typing issue in stencil/postcss.
• [CSS] host-context is not supported (because of Safari): https://stencil-worldwide.slack.com/archives/C78FYDJH3/p1560600367044800
• [Doc] Auto-generated doc is only updated when running npm start.
• [Browser APIs] KeyboardEvent#key not normalized: https://github.com/ionic-team/stencil/issues/1752
• [CSS] :root must be used separately to work in Edge https://github.com/ArcGIS/calcite-app-components/pull/144
• [Component:Decorators] Decorator data must be statically analyzable by the compiler (see https://github.com/ionic-team/stencil/issues/2085).

• [Polyfills] There have been some complications with stencil loading elements polyfills in Edge. So, some APIs that are available in Chrome and Firefox aren't available in Edge.
• [IE11] is not recommended to use with our web components.

Questions

• [Testing] What does getProperty return when the property is an element?

  I’m trying to do some assertions on a component property that references a child element. It doesn’t seem to be an E2EElement. I posted on the Stencil’s testing Slack channel. https://stencil-worldwide.slack.com/archives/CG0TNT3EH/p1560468252013000

Resources

• Unit Testing StencilJS (1.0 +)

Web Components

• [CSS] Shadow DOM spec only allows compound selectors for host, host-context and slotted.
• [CSS] ::slotted()selector can only access the topmost element, so use per slotted element. See https://github.com/ArcGIS/calcite-app-components/wiki/2019-Weekly-Meeting#2019-07-26