Safari上的聚合物2.0

任何人都可以帮助我怀疑...我正在Safari上测试新的Polymer 2.0预览，但似乎无法正常工作。问题是，我在index.htm中使用了一个简单的代码（只是我的元素），加载了polyfill，但是我没有构建并使用gulp和BrowserSync服务。它恰好适用于Chrome和Mozila，但不适用于Safari。该组件甚至不加载。Safari上的聚合物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>

来源

2017-03-06 Fabio Santana

嗨，你不应该需要建立任何东西。如果它在Firefox上加载，你应该使用Polyfill工作。您也可以使用DevTools查看是否存在填充。您需要为任何人发布一些代码以进一步帮助您。 – cloudworks

@cloudworks哥们，这是代码。你能帮我吗？有任何想法吗？ –

试图改变上述进口：

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

收件人：

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

看看它是否有效。

您可以检查目录和查找文件“聚合物element.html”，如果它在以下目录中存在：

../bower_components/polymer/

来源

2017-03-09 02:55:48 0x01Brain

Safari上的聚合物2.0

回答

相关问题