在聚合物元素注冊之前訪問元素屬性

Question

我想直接在Polymer元素上聲明屬性，然后將這些屬性傳遞到該元素內部，並且可以在元素腳本之外讀取/訪問。

我想使用此類屬性的值來決定如何注冊元素。

---

tl; dr

我遇到一個問題，我需要在整個頁面加載后的某個時間注冊一個元素-即我想手動注冊該元素。

按需注冊元素的解決方案：

 <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廣播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');