2017-03-06 4 views
0

Safariで新しいPolymer 2.0のプレビューをテストしていますが、正しく動作していないようです。 私は、index.htmで単純なコード(ちょうどmy-element)を使用していますが、polyfillをロードしていますが、gulpとBrowserSyncをビルドして提供していません。 ChromeやMozilaでは動作しますが、Safariでは動作しません。コンポーネントはロードさえしません。SafariのPolymer 2.0

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> 
+0

こんにちは、あなた何かを構築する必要はありません。 Firefoxに読み込んでいる場合は、Polyfillが動作するはずです。また、DevToolsを使用して、ポリフィルがあるかどうかを確認することもできます。誰かがあなたをさらに助けるためのコードを投稿する必要があります。 – cloudworks

+0

@cloudworks buddy、これはコードです。お手伝いできますか?何か案は? –

答えて

1

は、上記のインポートを変更しようとします:

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

宛先:

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

動作するかどうかを確認します。

それは次のディレクトリに存在する場合は、「ポリマーelement.htmlを」ディレクトリをチェックして、ファイルを探すことができます:

../bower_components/polymer/

関連する問題