标签: web-component

为了单独测试我的一些聚合物自定义元素,我希望能够传递js对象文字以获取通常来自父元素的一些属性.我无法弄清楚如何做到这一点.请参阅此示例代码.如果它按照我的意愿工作,它会显示1和2彼此相邻,但它不起作用.

<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="my-element" attributes="stuff">
  <template>
    {{stuff.one}} {{stuff.two}}
  </template>
  <script>
    Polymer('my-element', {
      ready: function () {
        console.log(this.stuff);
      }
    });
  </script>
</polymer-element>
<my-element stuff='{"one": 1, "two": 2}'></my-element>

将样式导入Web组件的规范方法是什么？

以下给出了一个错误HTML element <link> is ignored in shadow tree:

<template>
    <link rel="style" href="foo.css" />
    <h1>foo</h1>
</template>

我使用以下方法使用shadow DOM插入它:

var importDoc, navBarProto;

importDoc = document.currentScript.ownerDocument;

navBarProto = Object.create(HTMLElement.prototype);
navBarProto.createdCallback = function() {
  var template, templateClone, shadow;

  template = importDoc.querySelector('template');
  templateClone = document.importNode(template.content, true);

  shadow = this.createShadowRoot();
  shadow.appendChild(templateClone);
};

document.registerElement('my-nav-bar', {
  prototype: navBarProto
});

我试图动态地为iron-ajax模板分配属性,但它解析为未定义.

<dom-module id="products-service">
  <style>
    :host {
      display: none;
    }
  </style>

  <template>
    <iron-ajax id="productsajax"
      auto
      url="http://localhost:3003/api/taxons/products"
      params='{"token":"my-token"}'
      method='GET'
      on-response='productsLoaded'
      handleAs='json'>
    </iron-ajax>
  </template>
</dom-module>

<script>
(function() {
    Polymer({
        is: 'products-service',

        properties: {
            categoryid: {
                type: String,
                notify: true,
                reflectToAttribute: true
            }
        },

        //here I am trying to add and `id` to the `iron-ajax` `params` attribute.
        ready: function() {
            this.$.productsajax.params.id = this.categoryid;
       }
    });
})();
</script>

生成的url如下所示:

`http://localhost:3003/api/taxons/products?token=my-token&id=undefined`

该dom-module的categoryid属性不是undefined我可以看到反映在属性正确的属性值,这意味着它是与如何我把它分配给属性.我也尝试了这个created和attached回调,但仍然无法正常工作.

编辑:categoryid …

题:

每当<paper-dialog>元素关闭时如何自动执行函数？

版本:聚合物1.0

码:

<paper-dialog id="paper-id"
              entry-animation="scale-up-animation"
              exit-animation="scale-down-animation">
    <sample-element></sample-element>
</paper-dialog>

标题是自我解释的.如果我得到多个简短答案,我会在最后编译它们.

在使用v1甚至v0之前,请参阅caniuse.com.

在polymer-cli上运行聚合物初始化时，我遇到了这个问题。

未捕获的DOMException：无法在'CustomElementRegistry'上执行'define'

我正在尝试为input元素创建一个本机Web组件.我希望该组件具有自定义验证功能,类似于聚合物的纸张输入自定义验证器功能.我不确定我是否可以将自定义验证器函数作为属性传递给(web组件)输入元素的实例.任何建议,将不胜感激.

我有一个自定义 Polymer 元素，我想以某种方式设置样式，并将其作为插件提供给许多不同的网站。我希望能够封装我的自定义组件的样式，使它们在嵌入它们的所有网站上看起来都相同。以下是父网页的字体指令如何干扰我的组件样式的示例：

<style>
* {
  font-size: 18px;
}
</style>
<script src="http://www.polymer-project.org/webcomponents.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

<polymer-element name="polymer-css-test">
  <template>
    <style>
      :host {
        font-size: 12px;
      }
    </style>
    <div>
      Please tell me how to make this 12pt.
    </div>
  </template>
  <script>
    Polymer('polymer-css-test', {
      ready: function () {
      }
    });
  </script>
</polymer-element>
<polymer-css-test></polymer-css-test>

在此先感谢您的帮助。

假设我们有一些类似于动画CSS加载器的CSS代码,我们希望在所有使用Shadow DOM的Web组件中使用它们.如果我们无法像使用::shadow和那样刺穿Shadow DOM,我们如何重新使用这个CSS代码/deep/？

我们甚至无法<link />在阴影DOM中添加,所以目前我强制通过多个<style>标签复制代码.

我真的想知道这种用例的建议最佳实践是什么.

谢谢.

我有一套定制的聚合物元素,我想在角度2应用中使用.

似乎聚合物元件的内容标签存在问题.如果元件位于角度2分量内,则元件的内容在聚合物元件内的错误位置处被渲染.

例:

我的聚合物元素"my-button"的模板如下所示:

<template>

  <button>
    <content></content>
  </button>

</template>

使用外角

当我在angular 2组件之外使用这个元素时,我得到了我期望的结果:

使用:

<my-button>Foo</my-button>

结果:

<my-button>
  <button>
    Foo
  </button>
<my-button>

在角度2组件内使用

在角度2组件中使用时,内容始终在元素模板的末尾呈现.就像内容标签不存在一样.

使用:

<my-button>Foo</my-button>

结果:

<my-button>
  <button>

  </button>
  "Foo"
<my-button>

题

问题可能是,聚合物和角2都使用内容标签进行转录.因此,将两者结合使用时,事情可能会变得有些混乱.

我很想在角度2内使用我所有的聚合物元素.所以关于如何解决这个问题的任何想法都将非常感激.