在聚合物元素注册之前访问元素属性

Question

我想直接在 Polymer 元素上声明属性，然后在元素内部传递，并在元素脚本外部可读/访问。

我想使用此类属性的值来决定如何注册元素。

<小时 />

博士

我遇到了一个问题，我需要在整个页面加载后的一段时间内注册一个元素 - 即我想手动注册该元素。

按需注册元素的解决方案：

 <dom-module id="foo-element">
   <template>
     <span> Foo element </span>
   </template>
 </dom-module>
 <script>
  window.addEventListener("app-ready", function() {
    "use strict";
    Polymer({
      is: "foo-element",
      properties: { 
      //..... rest of element properties, methods, etc

解释我在上面做什么：

• 我不是使用HTMLImports.whenReady(<element-registration-code>)，而是使用addEventListener(event, <element-registration-code>

• 我广播app-ready，当我想进行注册时

• 这允许我按需注册元素

上述解决方案的可重用性问题

这带来了严重的可重用性问题 - 虽然其中一个上下文中的这个元素需要在某个特定时间点注册，但在其他上下文中可能不需要 - 它应该使用标准HTMLImports.whenReady(<elementCode>)方法注册自身。

一个理想的例子：

<!-- Registers automatically when `HTMLImports` are ready, the "regular" way-->
<foo-element></foo-element>
<!-- Registers only when it picks up an `app-ready` event-->
<foo-element no-auto-register register-on-event="app-ready"></foo-element>

该元素可能如下所示：

<dom-module id="foo-element">
  <template>
    <span> Foo element </span>
  </template>
</dom-module>
<script>
     // if `no-auto-register` is set on the element, 
     // do not use `HTMLImports.whenReady()` and use 
     // `addEventListener` to register when an event
     // with the value of `register-on-event` property fires.
</script>

长话短说

有没有办法直接在元素上声明标志/属性/属性，这将决定如何进行注册？

Answer 1

将attribute传递给元素可能不起作用，因为元素需要处于ready状态。以下是三种方法，可以帮助您尝试

在 Polymer 中lazy register元素的一种方法是使用 Polymer.Class 而不是Polymer构造函数。这样，在您手动注册元素之前，它不会被渲染。下面是一个相同的工作示例。

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="poly-form">
  <template>
    <style></style>
    I am parent Element
    <div>
      <button onclick='register()'>Save</button>
    </div>
    <show-form></show-form>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'poly-form',
  });
  //element to lazy register
  var showForm = Polymer.Class({
    is: 'show-form',
    ready: function() {
      this.textContent = 'I am working...';
    }
  });
  function register() {
    var form = document.querySelector('poly-form');
    //lazy register the element
    document.registerElement('show-form', showForm);
  }
</script>
<poly-form></poly-form>

在此示例中show-form元素在单击按钮之前不会呈现。

请注意，我从未真正尝试过使用包含dom的元素。

第二种方式也应该可以通过importHref方法实现。

第三种方法是global setting惰性寄存器，其中元素仅在调用其第一个实例时才获得寄存器。

抱歉，该代码段的结构不如预期。希望对您有所帮助。

Answer 2

类样式构造函数

如果要设置自定义元素的原型链，但不立即注册它，则可以使用 Polymer.Class 函数。Polymer.Class 采用与 Polymer 函数相同的原型参数，并设置原型链，但不注册元素。相反，它返回一个构造函数，该构造函数可以传递给 document.registerElement 以向浏览器注册您的元素，之后可用于通过代码实例化元素的新实例。

var MyElement = Polymer.Class({
 is: 'my-element',
 // See below for lifecycle callbacks
   created: function() {
      this.textContent = 'My element!';
   }
});
document.registerElement('my-element', MyElement);
// Equivalent:
var el1 = new MyElement();
var el2 = document.createElement('my-element');