[custom-elements] Misbehaving with Stencil generated custom elements

[AmitMY]

Description

I am trying to add this custom element generated with Stencil to YouTube, which uses the custom-elements-es5-adapter. However, if I use esm code, I get one type of error, if I use es5 code, I get another. This code works for websites without the custom elements polyfill.

Example

at first, I wrote in the console:

const script = document.createElement("script")
script.type = "module"
script.src = "https://unpkg.com/pose-viewer@0.0.4/dist/pose-viewer/pose-viewer.esm.js"
document.head.appendChild(script)

and then:

document.createElement('pose-viewer')

but I got this error:

Uncaught TypeError: Class constructor a cannot be invoked without 'new' at new g (custom-elements-es5-adapter.js:11) at :1:10

so I compiled to es5:

const script = document.createElement("script")
script.src = "https://unpkg.com/pose-viewer@0.1.2/dist/pose-viewer/pose-viewer.js"
document.head.appendChild(script)

but I got this error:

Uncaught TypeError: Illegal invocation at n.f (pose-viewer.js:15) at Function.getOwnPropertyDescriptor (pose-viewer.js:15) at pose-viewer.js:44 at pose-viewer.js:58 at pose-viewer.js:130

Steps to reproduce

See example^

Expected behavior

This should work weather or not the custom elements polyfill is present.

Actual behavior

works with the browser implementation of custom elements, doesn't work with the polyfill.

Version

Unknown. This is hosted on YouTube, and I'm just trying to plug into it.

Browsers affected

• [x] Chrome

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.