有时候我们需要动态地将自定义元素添加到上下文中.然后:

• 插入的聚合物可以接收绑定到上下文中的另一个属性的一些属性,因此它可以相应地改变.

• 在聚合物0.5处,我们可以使用PathObserver将属性绑定到最近添加的组件的上下文属性.但是,我没有在聚合物1.0中找到解决方法或等效物.

我创建了一个0.5的示例,并为1.0创建了相同的示例.请参阅下面的注射聚合物代码.此外,您还可以看到完整的plunker示例,以便清晰.

Ej 0.5:

<polymer-element name="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
  <script>
    Polymer({
      domReady: function() {
        // injecting component into polymer and binding foo via PathObserver
        var el = document.createElement("another-element");
        el.bind("foo", new PathObserver(this,"foo"));
        this.$.dynamic.appendChild(el);
      }
    });
  </script>
</polymer-element>

请参阅完整的plunkr示例:http://plnkr.co/edit/2Aj3LcGP1t42xo1eq5V6？p = preview

Ej 1.0:

<dom-module id="main-context">
  <template>
    <one-element foo="{{foo}}"></one-element>
    <div id="dynamic">
    </div>
  </template>
</dom-module>
<script>
  Polymer({
    is: "main-context",
    ready: function() {
      // injecting component into polymer and binding foo via PathObserver
      var el = document.createElement("another-element"); …

在Web组件中,要注册元素,只需键入:

var XFoo = document.registerElement('x-foo', {
  prototype: Object.create(HTMLElement.prototype)
});

要创建元素,您可以执行以下操作之一:

<x-foo></x-foo>

var xFoo = new XFoo();
document.body.appendChild(xFoo);

var xFoo = document.createElement( 'x-foo')
document.body.appendChild(xFoo);

这一切都很好,花花公子.当您谈论扩展现有元素时,问题就开始了.

var XFooButton = document.registerElement('x-foo-button', {
  prototype: Object.create(HTMLButtonElement.prototype),
  extends: 'button'
});

问题1:为什么重复？在这里,'button'应该足够了(特别是因为它很容易计算元素的原型Object.getPrototypeOf(document.createElement(tag));

问题2:内部如何使用该信息？例如,如果您拥有prototype: Object.create(HTMLFormElement.prototype和extends: 'button'(后面的内容extends与原型传递不匹配)会发生什么

要创建一个,您可以执行以下操作之一:

<button is="x-foo-button"></button>

var xFooButton = new XFooButton();
document.body.appendChild(xFoo);

var xFooButton = document.createElement('button', 'x-foo-button');
document.body.appendChild(xFooButton);

问题3:因为很明显x-foo-button扩展了button,为什么我们在使用时必须指定它们document.createElement()？我怀疑那是因为document.createElement()只是创建一个带语法的标签<button is="x-foo-button"></button>,这让我想到了下一个问题:

问题4 …

假设我有两个截然不同的 polymer-elements

一个应该使用content占位符嵌入另一个内部.是否有可能在这两个嵌套之间进行数据绑定polymer-elements？

我试过了,但我无法让它工作:http://jsbin.com/IVodePuS/11/

根据http://www.polymer-project.org/articles/communication.html#bindingpolymer-elements应该工作之间的数据绑定(在这些示例中,它们是在template标记内完成而不使用content占位符).

更新:

斯科特迈尔斯澄清说,数据绑定只适用于该template级别.
但是在我的情况下,我template事先并不知道确切的但是我想允许我的用户parent-element指定child-element它应该包含哪些(假设有不同的child-elements.
我认为这个问题与这个问题有关:使用在光dom中定义的模板在Polymer元素中

我更新了以下示例以突出显示他:

<polymer-element name="parent-element" >
  <template >
    <div>Parent data: {{data1}} </div>
    <content />
  </template>
  <script>
    Polymer('parent-element', {
      data1 : '',
      ready: function() {
        this.data='parent content';
      }
    });

  </script>
</polymer-element>

<polymer-element name="child-element" attributes="data2">
   <template>
    <div>Parent data: {{data2}} </div>
  </template>
  <script>
    Polymer('child-element', {
      data2 : '',
      ready: function() { …

我一直在使用Polymer开发一个chrome扩展已有一段时间了,我有一些关于在它当前状态下释放它的担忧.我想听听一些防止我遇到的以下问题的策略:

1)将Polymer加载到页面中会泄漏到全局名称空间中.Polymer不会捆绑到JS文件中,而是以html页面的形式出现,并要求用户使用HTML导入将其加载到页面中.AFAIK,内容脚本只允许CSS和JS,但不允许HTML.要解决此问题,我通过动态生成链接元素并将其添加到页面中来包含它:

function loadUrl(url) {
  return new Promise(
    function(resolve, reject) {
      var link = document.createElement('link');
      link.setAttribute('rel', 'import');
      link.setAttribute('href', url);
      link.onload = function() {
        resolve(url);
      };
      document.head.appendChild(link);
    });
}

loadUrl(chrome.extension.getURL("polymer/polymer.html")).
then( loadUrl(chrome.extension.getURL("my/component.html")) )

一旦加载到主机页面,它就不像内容脚本那样独立运行,如果页面已经加载了Polymer ,则会导致命名空间冲突.

2)聚合物不会告诉您何时装入并准备使用.聚合物(当前)在加载时不会触发事件,因此,我的组件有时会在聚合物进入并断开之前加载.

为了缓解这个问题,我在结束时触发了一个自定义事件polymer-micro.html(这是Polymer的定义):

var ev = new CustomEvent('polymer-loaded');
document.dispatchEvent(ev);

3)Polybuild工具不会为chrome扩展生成正确的代码.虽然它很有用,但它会在命名空间之外生成一个单独的javascript文件,dom-module从而导致命名空间leak进入全局窗口对象.例如,如果在我的模块中导入jQuery,Polybuild将生成一个包含DOM模块之外的jQuery的JS文件,从而将其附加到主机窗口对象 - 这是Chrome扩展中的一个大禁忌.

感谢您的反馈.

在撰写本文时,我正在使用Polymer 1.2.3

我正在研究我的第一个X-Tag应用程序,在它的页面上,它表示它可以与Web组件API一起使用,例如"自定义元素,影子DOM,模板和HTML导入".

我已经开始研究我的模板,但是导入它们的最佳选择是什么,现在已经弃用了HTML Imports？

我对如何在Angular 2中的模块之间共享组件存在疑问.重点是:我在应用程序中有两个模块,即"客户模块"和"供应商模块".

这些模块在其组件中都使用了AddressComponent和EmailComponent.他们也都使用接口地址和电子邮件.

现在,我目前有很多重复,因为我已经在这两个模块上复制并粘贴了这些组件和接口.这显然是完全错误的.

我需要一种方法来导入要在两个模块上使用的组件.但我不知道该怎么做.

我应该为这个共享的东西创建另一个模块并将其导入两者吗？在Angular 2中共享模块之间的组件的正确方法是什么？

在没有任何框架的情况下使用Web Components，实现自定义事件的正确方法是什么？例如，假设我有一个x-pop-out具有自定义事件的自定义元素，pop我希望以下所有内容都能正常工作：

<x-pop-out onpop="someGlobal.doSomething()"/>

var el = document.getElementsByTagName('x-pop-out')[0];
el.onpop = ()=> someGlobal.doSomething();
//or
el.addEventListener('pop', ()=> someGlobal.doSomething());

最后一个我知道该怎么做，但是我是否需要为每个属性和一个 getter/setter 自定义实现？另外，eval()从属性执行字符串的适当方法是什么？

有没有办法改变阴影元素中的样式？具体来说,扩展/覆盖在css 类中找到的一些属性？我正在使用名为Beanote的chrome扩展程序,自2017年4月(2017年)以来尚未更新,我想修复一个讨厌的错误.我发现一行css补丁对我来说足够了,但是我不知道如何应用它而不进入阴影元素本身并直接在开发工具中编辑这些样式.

我正在寻找一种方法:

/*global css rule*/
.the-class-name { property-name: my-value; }

覆盖这个:

/* style tag inside the shadow-root */
.the-class-name { property-name: bad-value; }

大部分的资源,我与涉及网上查询发现shadow-root override style或edit shadow-root styling有一些东西需要做:host,如果它意味着这个,不适合我的需要或喜欢否决的功能工作::shadow.

我知道规范目前只允许 ::slotted 的复合选择器，即::slotted(my-first + my-second)不允许，但这样的事情应该工作吗？

::slotted(x-first) + ::slotted(x-second) { /* css */ }

有什么方法可以定位开槽的兄弟姐妹（除了使用全局 css）？如果没有，我会在哪里提交这样的请求？谢谢。

我有一个自定义组件，当我将布尔属性设置为 false 时，该组件应该隐藏内容。除该属性外，所有其他属性都会得到反映。我一定做错了什么。

static get properties(){
      title: {
        type: String,
        attribute: 'title',
      },

      titleEnable: {
        type: Boolean,
        attribute: 'title-enable',
      },
}

constructor() {
    super();
    this.titleEnable=true;
    this.title="default";
}

render(){

    return html`                
        ${this.titleEnable 
        ? html`
        <p class="title" ?hidden="${!this.titleEnable}">${this.title}</p>
        `
        : html ``} 
    ` 
}

如果我像<my-component></my-component>在 HTML 文件中一样使用该组件，它会显示：按预期默认。

如果我像这样使用它：<my-component title="New Title"></my-component>它会显示：按预期新标题。

但如果我尝试隐藏它，<my-component title-enable="false"></my-component>布尔值就不会改变。我已经尝试过 !title-enable、title-enable='false"、.titleEnable=false 以及您能想象到的所有变体。最让我生气的是，每当我在构造函数中设置 'this.titleEnable=false' 和我碰巧只是在标签上声明了没有值的变量，并将其视为 TRUE，出现“默认值”。<my-component title-enable></my-component>我完全迷失了。