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.
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.
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.