Safari의 Polymer 2.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>

출처

2017-03-06 Fabio Santana

안녕하세요, 아무것도 구축 할 필요가 없습니다. Firefox에로드하는 경우 Polyfill이 작동해야합니다. 또한 DevTools를 사용하여 polyfill이 있는지 확인할 수 있습니다. 더 많은 도움을 줄 수있는 코드를 게시해야합니다. – cloudworks

@cloudworks buddy, 코드입니다. 도와 드릴까요? 어떤 아이디어? –

봅니다 위의 수입을 변경하려면 :

<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의 Polymer 2.0

답변

관련 문제