t2ym / i18n-element

I18N Base Element for Lit and Polymer
Other
9 stars 1 forks source link

[i18n-dom-bind] dom-repeat in i18n-dom-bind #5

Closed t2ym closed 5 years ago

t2ym commented 7 years ago

i18n-dom-bind should be affected by https://github.com/Polymer/polymer/issues/3911 as well.

t2ym commented 7 years ago

With ShadyDOM, callbacks for rendered items by dom-repeat are not called and the items are not rendered properly.

Root Cause:

With ShadyDOM, Custom Elements V1 polyfill cannot properly judge if the target node is attached to the document in isConnected() function by traversing its parent node chain to the document.

    <i18n-dom-bind id="domBind">
      <template>
        <dom-repeat id="domRepeat" items="{{items}}">
          <template>
            <div>Item Name: {{item.name}}</div>
            <!-- Converted to
              <i18n-format>
                <span>Item Name: {1}</span><span slot="1">{{item.name}}</span>
              </i18n-format> 
            -->
          </template>
        </dom-repeat>
      </template>
    </i18n-dom-bind>
    <script>
      HTMLImports.whenReady(function () {
        domBind.items = [{name:'item0'}, {name: 'item1'}, {name: 'item2'}, {name: 'item3'}];
      });
    </script>

Workaround:

This should be fixed at ShadyDOM or Custom Elements V1. Ad-hoc dirty hack for insertBefore: Add host property to the parent #document-fragment so that isConnected() can track parent node of the #document-fragment as the parent node of beforeNode. This hack may have unexpected side effects.

  <script>
      function patchInsertBefore() {
        Node.prototype._insertBefore = Node.prototype.insertBefore;
        Node.prototype.insertBefore = function (node, beforeNode) {
          if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
              beforeNode.__$CE_attached) {
            node.host = beforeNode.parentNode;
          }
          return Node.prototype._insertBefore.call(this, node, beforeNode);
        };
      }
      patchInsertBefore();
  </script>
t2ym commented 5 years ago

Status unknown.