'Polymer 1.x: Incompatible with native web-components?

(tl;dr - yes. However Polymer 2.0 is not and is an easy upgrade.)

I am trying to migrate an old front-end code base away from polymer 1.11.3 (webcomponentsjs 0.7.24) to native web-components.

However, I'm running into the following issue:

When Polymer is included in a page, even trivial native web-components are effectively broken. Web-components that have neither custom methods nor properties seem work. But, include a custom method or property and try to access it, and you'll encounter an error indicating that the property or method does not exist.

For example, given the following component:

customElements.define( 'x-hello', class J extends HTMLElement {
  hello() { console.log( 'hello called' ) }
})

document.createElement( 'x-hello' ).hello()

If I run this on a page that includes Polymer,

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="application-name" content="re">

<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">

</head>
        <body>
                <h1>Here</h1>
        </body>
        <script>
                customElements.define( 'x-hello', class J extends HTMLElement {
                        hello() { console.log( 'hello called' ) }
                })
                document.createElement( 'x-hello' ).hello()
        </script>
</html>

Then I get the following error:

Uncaught TypeError: document.createElement(...).hello is not a function
    <anonymous> debugger eval code:5

However, run it in a page that doesn't include Polymer and it will run just fine.

The few components that I've migrated away from Polymer so far fail in the same way when included in the Polymer-based app I pulled them from. Similarly, running them in a test project that doesn't contain Polymer and they function fine.

I get that both the Polymer lib and webcomponentjs were intended to provide webcomponent support and functionality at a time when browsers didn't support it, but it seems like Polymer should at least be compatible with native web-components.

Is there a work-around for this? Is there some way to incorporate native web-components into an application that is using Polymer 1.x?

I'd really like to be able to migrate components away from Polymer and to native one at a time rather than all at once.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Polymer 1.x: Incompatible with native web-components?

Sources

Related Questions