Stencil Styleguide

[alexnm]

After we merged #319, there are still a couple of loose ends in the stencil generator, more related to some restrictions or coding guidelines, others are simply missing parts. Everything is listed below in this single issue:

• [ ] a prop called title is not allowed in stencil, throws a warning, but further research into restricted names should be done
• [x] name of the component must obey certain rules according to the Custom Elements Specification, including having a dash somewhere in the name.
• [ ] functional components can be implemented in Stencil in a similar manner with how Preact has two options (functional vs class components) - https://stenciljs.com/docs/functional-components
• [ ] the propCall handler should be implemented with event emitters, similar with the Vue implementation - https://stenciljs.com/docs/events
• [x] project generation should be researched, with stencil-router, but also exporting as pure components for a design system
• [ ] we need a solution for generating title/meta data changes per page in stencil
• [ ] border-box setting does not cascade, hence we should experiment to generate stencil without shadow root for project generators. additionally, router-links are not styled the same as with other frameworks, we should check this out as well.

Known issues:

• [ ] when doing nested styles based on attributes, the .collapsible-area[data-is-expanded='true'] fails because stencil does not render boolean valued attributes as attr='true' but simply as attr. this is contrary to the react/preact way