首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Safari上的聚合物2.0

Safari上的聚合物2.0
EN

Stack Overflow用户
提问于 2017-03-07 03:35:02
回答 1查看 536关注 0票数 0

有没有人能帮我个忙……我正在Safari上测试新的Polymer 2.0预览版,但它似乎不能正常工作。问题是,我在index.htm中使用了一个简单的代码(只有my-element),加载polyfill,但我没有使用build并使用gulp和BrowserSync提供服务。它碰巧在Chrome和Mozila上运行,但在Safari上不起作用。该组件甚至不会加载。

在Safari上服务之前,我需要构建吗?

这是一个简单的代码,只是test...but,我会张贴:

索引:

代码语言:javascript
运行
复制
<!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:

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2017-03-09 10:55:49

尝试更改上面的导入:

代码语言:javascript
运行
复制
<link rel="import" href="../bower_components/polymer/polymer-element.html">

至:

代码语言:javascript
运行
复制
<link rel="import" href="../bower_components/polymer/polymer.html">

看看它能不能用。

您可以检查该目录,并查找在以下目录中是否存在文件“polymer element.html”:

../bower_components/聚合物/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42634099

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档