2.0-preview: Uncaught ReferenceError: customElements is not defined

jifalops commented 8 years ago

Description

Testing polymer2.0-preview migration using Polymer Starter Kit 2 fails with customElements being undefined.

console

Steps to Reproduce

Create a project using Polymer Starter Kit 2 (polymer-cli)
Remove my-view2 and my-view3 so the app consists of just my-app and my-view1.
polymer serve and see the errors in browser
Versions

polymer#1ddafe6f8a webcomponentsjs#9892fbccde

miztroh-zz commented 8 years ago

Make sure you're including this:

<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

jifalops commented 8 years ago

always? I thought it was only added if needed. Also when I go to the definition of customElements in code, it is in bower_components/shadydom/src/shady.js.

Adding that script to my-app and my-view1 didn't eliminate any errors (and added one).

Update Adding the script to index.html (and nowhere else) works as far as removing the errors shown above. More errors follow; I'll get back to you on that. I think I might have to wait on the Polymer Elements (iron, paper, etc.) to get updated to 2.0.

Loading webcomponents-lite.js is no longer optional?

kevinpschaaf commented 8 years ago

Native custom elements v1 (window.customElements) is in Chrome Canary/Beta but has not yet shipped in Chrome stable. So yes, you will either need to run on the Canary/Beta channel or load webcomponents-lite.js.

Once Chrome ships native v1 in stable, you can develop on Chrome without most of the polyfills; however note that the custom-style and @apply shims have been moved to webcomponentsjs/shadycss, and so that polyfill will be required to use elements relying on those features.

Loading polyfills will continue to be the responsibility of the application; Polymer will not load the code by default, allowing users to customize and optionally optimize the polyfill payload per client depending on browser capability, depending on how sophisticated server logic they choose to implement.

We will provide more guidance on all this as 2.0 and the polyfills become more stable.

jifalops commented 8 years ago

I am wondering if it is intentional to break the check if webcomponents-lite.js is needed.

index.html now requires

<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>

instead of the previous commonly used check

<script>
      // Load webcomponentsjs polyfill if browser does not support native Web Components
      (function() {
        'use strict';
        var onload = function() {
          // For native Imports, manually fire WebComponentsReady so user code
          // can use the same code path for native and polyfill'd imports.
          if (!window.HTMLImports) {
            document.dispatchEvent(
              new CustomEvent('WebComponentsReady', {bubbles: true})
            );
          }
        };

        var webComponentsSupported = (
          'registerElement' in document
          && 'import' in document.createElement('link')
          && 'content' in document.createElement('template')
        );

        if (!webComponentsSupported) {
          var script = document.createElement('script');
          script.async = true;
          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
          script.onload = onload;
          document.head.appendChild(script);
        } else {
          onload();
        }
      })();
    </script>

johnthad commented 7 years ago

Shouldn't the webcomponents.js polyfill enable this for all browsers? I'm using 0.7.23 and it is not working in the most recent versions of Firefox, Safari, or Edge. Here's my example, lifted from the Custom Elements spec. Firefox errors with ReferenceError: customElements is not defined at the line customElements.define("flag-icon", FlagIcon); (The others give the same or a similar error.)

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Custom Element Demo</title>
  <script src="node_modules/webcomponents.js/webcomponents.min.js"></script>
  <style>
  </style>
</head>
<body>

  <!-- See https://w3c.github.io/webcomponents/spec/custom/#custom-elements-autonomous-example -->
  <flag-icon country="nl"></flag-icon>

  <script>
    class FlagIcon extends HTMLElement {
      constructor() {
        super();
        this._countryCode = null;
      }

      static get observedAttributes() { return ["country"]; }

      attributeChangedCallback(name, oldValue, newValue) {
        // name will always be "country" due to observedAttributes
        this._countryCode = newValue;
        this._updateRendering();
      }
      connectedCallback() {
        this._updateRendering();
      }

      get country() {
        return this._countryCode;
      }
      set country(v) {
        this.setAttribute("country", v);
      }

      _updateRendering() {
        // Left as an exercise for the reader. But, you'll probably want to
        // check this.ownerDocument.defaultView to see if we've been
        // inserted into a document with a browsing context, and avoid
        // doing any work if not.
        console.log("_updateRendering()");
      }
    };

    customElements.define("flag-icon", FlagIcon);

  </script>
</body>
</html>

web-padawan commented 7 years ago

@johnthad you use an old webcomponents.min.js which polyfills v0 API. Use webcomponents-lite.min.js from this branch instead. It is not yet tagged so you have to configure your package.json properly.

johnthad commented 7 years ago

@web-padawan Thank you. I downloaded the zip, and followed the Manually Building instructions, but got a error when I ran gulp build. However was able to copy the custom-elements, shadycss, and shadycss directories from bower-components to where webcomponents-lite.js was pointing and that works. I'll watch this branch for progress.

Polymer / polymer

2.0-preview: Uncaught ReferenceError: customElements is not defined #3948

Description

Steps to Reproduce

Versions