Polymer 1.0项目Edge调用getAttributes报SCRIPT438错误求助

I’ve run into this exact issue with Polymer 1.0 and Edge before—Chrome handles custom element upgrades smoothly, but Edge can be finicky, even with the polyfill in place. Let’s break down the likely causes and fix them step by step:

1. Fix the Polyfill Loading Timing #

Your current polyfill code adds the script to the <body> after checking browser support, but if your component imports load before the polyfill finishes initializing, Edge won’t properly upgrade your custom elements. This means when you call getAttributes(), the element is still a plain HTMLElement without your component’s methods attached.

Fix: #

Move the polyfill loader to the very top of your <head>, load it synchronously, and make sure it runs before any component imports:

<head>
  <script>
    // Check for native web components support
    if (!('registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template'))) {
      var polyfillScript = document.createElement('script');
      polyfillScript.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
      polyfillScript.async = false; // Force synchronous load to ensure polyfill is ready first
      document.head.appendChild(polyfillScript);
    }
  </script>
  <!-- Now load your component imports -->
  <link rel="import" href="attributes-cmp.html">
</head>

2. Ensure Your Method Is Properly Exposed in the Component #

Double-check that your getAttributes method is defined directly in the Polymer component configuration object. If you added it manually to the prototype later, Edge might not pick it up correctly during element upgrade.

Correct Component Definition: #

<!-- attributes-cmp.html -->
<dom-module id="attributes-cmp">
  <template>
    <!-- Your component's template content here -->
  </template>
  <script>
    Polymer({
      is: 'attributes-cmp',
      // Define the method directly in the Polymer config
      getAttributes: function(jsonParams) {
        // Your method logic here
      }
    });
  </script>
</dom-module>

3. Wait for Components to Fully Upgrade Before Calling Methods #

Edge’s custom element upgrade process is slower than Chrome’s. If you call getAttributes() immediately on page load, the component might not have finished initializing yet.

Fix 1: Listen for the WebComponentsReady Event #

This event fires when all web components (including polyfilled ones) are fully upgraded:

document.addEventListener('WebComponentsReady', function() {
  var elt = document.getElementById(eltId);
  // Add a safety check to avoid errors
  if (elt && typeof elt.getAttributes === 'function') {
    elt.getAttributes(jsonParams);
  }
});

Fix 2: Use Polymer’s Component Lifecycle Callbacks (Better for Component-to-Component Calls) #

If you’re calling the method from another Polymer component, use the attached or ready lifecycle hooks (these run after the component and its children are upgraded). Also, avoid document.getElementById—use Polymer’s built-in this.$ selector for elements defined in your component’s template:

<!-- Second component's template -->
<dom-module id="second-component">
  <template>
    <attributes-cmp id="attrsCmp"></attributes-cmp>
  </template>
  <script>
    Polymer({
      is: 'second-component',
      attached: function() {
        // Use this.$ to get the component instance reliably
        var attrsComponent = this.$.attrsCmp;
        attrsComponent.getAttributes(jsonParams);
      }
    });
  </script>
</dom-module>

4. Verify WebComponentsJS Version Compatibility #

Polymer 1.0 works best with older versions of webcomponentsjs (v0.7.x). If you’re using a newer version, it might not play nicely with Edge. Check your bower.json to ensure you have the right dependency:

{
  "dependencies": {
    "polymer": "1.x",
    "webcomponentsjs": "^0.7.24"
  }
}

After making these changes, test in Edge again—this should resolve the "method not supported" error.

内容的提问来源于stack exchange，提问作者e2rabi