Question

任何人都可以帮我疑惑......我正在Safari上测试新的Polymer 2.0预览版，但它似乎无法正常工作。问题是，我在index.htm中使用了一个简单的代码（只是my-element），加载了polyfill，但是我没有使用gulp和BrowserSync进行构建和服务。它恰好适用于Chrome和Mozila，但不适用于Safari。该组件甚至不加载。

我需要在Safari服务之前构建吗？

这是一个简单的代码，只是为了测试...但我还是会发帖：

指数：

<!DOCTYPE html>
<html lang="pt-br">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Polymer element - Test</title>

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

  <link rel="import" href="/src/my-element.html"></link>    

</head>   

<body>

  <my-element></my-element>

</body>
<script>
  window.addEventListener('WebComponentsReady', function() {
    alert('Web Components Working');
  });
</script>
</html>

我的元素：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<dom-module id="my-element">
  <template>

    <!-- Style -->
    <style>

      :host {
        display: block;
      }

    </style>
    <h2>Name : [[name]]</h2>

    <slot></slot>

  </template>

  <script>

    // Extend Polymer.Element base class
    class MyElement extends Polymer.Element {

      static get is(){ return 'my-element' }

      // properties
      static get properties() {
        return {
          name: {
            type: String,
            value: 'my-element'
          }
        };
      }

      // observers
      static get observers() {
        return ['_nameChanged(name)'];
      }

      // constructor
      constructor() {
        super();
        console.log('my-element > created');
      }

      connectedCallback(){
        super.connectedCallback();
        console.log('my-element > attached');

      }

      disconnectedCallback(){

      }

      attributeChangeCallback(){

      }

      // ready > add listeners and attributes at appropriate callback
      ready() {
        this.addEventListener('click', (e) => {
          this._handleClick(e);
        });

        super.ready();
        console.log('my-element > ready');
      }

      _handleClick(e) {
        console.log(e.type);
      }

      _nameChanged(name){
        console.log(`Name: ${name}`);

        // Select the elements
        // this.$.
        // this.$.
      }


    }

    // Register custom element definition using standard platform API
    customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

Answer 1

尝试更改上面的导入：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

要：

<link rel="import" href="../bower_components/polymer/polymer.html">

看看它是否有效。

您可以检查目录并查找文件“polymer-element.html”（如果它存在于以下目录中）：

../ bower_components /聚合物/

Safari上的Polymer 2.0

1 个答案: