Stencil: Allow to output standalone components

Created on 20 Feb 2020  路  3Comments  路  Source: ionic-team/stencil

Stencil version:

 @stencil/core@^1.9.0-18

I'm submitting a:
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
It's not possible to output a bundled and fully standalone custom element that defines itself.
According to this readme this was possible with dist-custom-elements but it apparently got removed as it is not a valid output target now.

Expected behavior:
Output a my-component.js which contains a native custom element and defines itself.

Other information:
This could be usefull for injecting stencil components to unconventional envirionment, such as Cypress nested iframes, for example.
EDIT: Actually I noticed most of the other WC wrappers/compilers output plain HTMLElement, so that is not uncommon and makes integration a lot easier.

triage

Most helpful comment

@adamdbradley I am aware of that target but the bundle is not standalone. The bundle, not only is a ES module but it only exports the custom elements, it doesn't register them. So it doesn't work as is directly when injected into a <script /> tag.
I was suggesting something along the lines of what was planned for dist-custom-element. That seemed something much easier to work with.

All 3 comments

Sorry, the output target is dist-custom-elements-bundle

@adamdbradley I am aware of that target but the bundle is not standalone. The bundle, not only is a ES module but it only exports the custom elements, it doesn't register them. So it doesn't work as is directly when injected into a <script /> tag.
I was suggesting something along the lines of what was planned for dist-custom-element. That seemed something much easier to work with.

@CyriacBr If I am understanding correctly, I am able to get what you are describing to work, just not with the output target dist-custom-elements-bundle. I am suing the regular dist output target. In my HTML head I have the <script /> tag pointing to the js file under ./dist/"namespace"/"namespace".js. Make sure not to add the nomodule attribute to the script tag, it will not work. In the js file under ./dist it says to add the attribute but that causes none of the needed js files to load to the browser. Again this appears to be working as a standard native web component, no ES module and does not need to run in server environment, just in the browser.

Was this page helpful?
0 / 5 - 0 ratings