Polymer 2.0 on Safari

Question

can anybody help me with a doubt... I'm testing the new Polymer 2.0 preview on Safari, but it seems that's not working properly. The thing is, I'm using a simple code (just my-element) in the index.htm, loading the polyfill but I'm doing it without build and serving with gulp and BrowserSync. It happens that is working on Chrome and Mozila, but not on the Safari. The component dont even load.

Do I need to build before serve on Safari?

Its a simple code just to test...but I will post anyway:

Index:

<!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>

my-element:

<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

Try to change the import above:

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

To:

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

See if it works.

You can check the directory and look for the file "polymer-element.html" if it exists in the following directory:

../bower_components/polymer/

Polymer 2.0 on Safari

Question

1 answers

solution1
1 2017-03-09 02:55:48

Polymer 2.0 on Safari

Question

1 answers

solution1 1 2017-03-09 02:55:48

solution1
1 2017-03-09 02:55:48