Add polyfills for select ParentNode APIs.

packages/shadydom/CHANGELOG.md

@@ -5,7 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-<!-- ## [Unreleased] -->
+## [Unreleased]
+
+- Add support for select ParentNode APIs.
+  ([#389](https://github.com/webcomponents/polyfills/pull/389))
 
 ## [1.7.4] - 2020-07-20
 

packages/shadydom/src/patch-native.js

@@ -94,8 +94,10 @@ const ParentNodeAccessors = [
 
 const ParentNodeMethods = [
   'querySelector',
-  'querySelectorAll'
-  // 'append', 'prepend'
+  'querySelectorAll',
+  'append',
+  'prepend',
+  'replaceChildren',
 ];
 
 export const addNativePrefixedProperties = () => {

packages/shadydom/src/patches/ParentNode.js

@@ -93,7 +93,27 @@ export const ParentNodePatches = utils.getOwnPropertyDescriptors({
       return children.length;
     }
     return 0;
-  }
+  },
+
+  /** @this {Element} */
+  append(...args) {
+    this[utils.SHADY_PREFIX + 'insertBefore'](utils.convertNodesIntoANode(...args), null);
+  },
+
+  /** @this {Element} */
+  prepend(...args) {
+    this[utils.SHADY_PREFIX + 'insertBefore'](
+        utils.convertNodesIntoANode(...args), this[utils.SHADY_PREFIX + 'firstChild']);
+  },
+
+  /** @this {Element} */
+  ['replaceChildren'](...args) {
+    let child;
+    while ((child = this[utils.SHADY_PREFIX + 'firstChild']) !== null) {
+      this[utils.SHADY_PREFIX + 'removeChild'](child);
+    }
+    this[utils.SHADY_PREFIX + 'insertBefore'](utils.convertNodesIntoANode(...args), null);
+  },
 
 });
 

packages/shadydom/src/utils.js

@@ -230,3 +230,17 @@ export const assign = (target, source) => {
 export const arrayFrom = (object) => {
   return [].slice.call(/** @type {IArrayLike} */(object));
 };
+
+// Implements 'convert nodes into a node'.
+// https://dom.spec.whatwg.org/#converting-nodes-into-a-node
+export const convertNodesIntoANode = (...args) => {
+  if (args.length === 1) {
+    return (typeof args[0] === 'string' ? document.createTextNode(args[0]) : args[0]);
+  }
+
+  const fragment = document.createDocumentFragment();
+  for (const arg of args) {
+    fragment.appendChild(typeof arg === 'string' ? document.createTextNode(arg) : arg);
+  }
+  return fragment;
+};

packages/shadydom/src/wrapper.js

@@ -245,6 +245,18 @@ class Wrapper {
     return this.node[utils.SHADY_PREFIX + 'className'] = value;
   }
 
+  append(...args) {
+    return this.node[utils.SHADY_PREFIX + 'append'](...args);
+  }
+
+  prepend(...args) {
+    return this.node[utils.SHADY_PREFIX + 'prepend'](...args);
+  }
+
+  replaceChildren(...args) {
+    return this.node[utils.SHADY_PREFIX + 'replaceChildren'](...args);
+  }
+
 }
 
 const addEventPropertyWrapper = (name) => {

packages/tests/shadydom/shady.html

@@ -458,6 +458,129 @@
     assert.strictEqual(getComposedHTML(host), '<b></b>');
   });
 
+  test('append - mutate host', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.append(document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>c<d></d>');
+  });
+
+  test('append - mutate host - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.append('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>b');
+  });
+
+  test('append - mutate shadow', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).append(
+        document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a><b></b>c<d></d>');
+  });
+
+  test('append - mutate shadow - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).append('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>b');
+  });
+
+  test('prepend - mutate host', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.prepend(document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<b></b>c<d></d><a>Hello</a>');
+  });
+
+  test('prepend - mutate host - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.prepend('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), 'b<a>Hello</a>');
+  });
+
+  test('prepend - mutate shadow', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).prepend(
+        document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<b></b>c<d></d><a>Hello</a>');
+  });
+
+  test('prepend - mutate shadow - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).prepend('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), 'b<a>Hello</a>');
+  });
+
+  test('replaceChildren - mutate host', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.replaceChildren(document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<b></b>c<d></d>');
+  });
+
+  test('replaceChildren - mutate host - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    host.replaceChildren('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), 'b');
+  });
+
+  test('replaceChildren - mutate shadow', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).replaceChildren(
+        document.createElement('b'), 'c', document.createElement('d'));
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<b></b>c<d></d>');
+  });
+
+  test('replaceChildren - mutate shadow - single string', function() {
+    ShadyDOM.wrapIfNeeded(host).innerHTML = '<a>Hello</a>';
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot>';
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), '<a>Hello</a>');
+    ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).replaceChildren('b');
+    ShadyDOM.flush();
+    assert.strictEqual(getComposedHTML(host), 'b');
+  });
+
   test('querySelectorAll .shadowRoot', function() {
     ShadyDOM.wrapIfNeeded(host).innerHTML = '<div id="main"></div>';
     ShadyDOM.wrapIfNeeded(ShadyDOM.wrapIfNeeded(host).shadowRoot).innerHTML = '<slot></slot><span id="main"></span>' +

packages/tests/webcomponentsjs_/parent-node/append.html

@@ -0,0 +1,127 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2020 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>ParentNode append</title>
+  <script>
+    for (const item of [
+      Document.prototype,
+      DocumentFragment.prototype,
+      Element.prototype,
+    ]) {
+      delete item.append;
+    }
+  </script>
+  <script src="../../node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-pf_dom.js"></script>
+  <script src="../wct-config.js"></script>
+  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
+</head>
+<body>
+  <script>
+    suite('ParentNode append', function() {
+      suite('Document', function() {
+        test('Appends an element', () => {
+          const doc = document.implementation.createHTMLDocument('');
+          while (doc.firstChild) {
+            doc.removeChild(doc.firstChild);
+          }
+
+          const child = document.createElement('html');
+          doc.append(child);
+
+          assert(doc.childNodes.length === 1);
+          assert(doc.childNodes[0] === child);
+        });
+      });
+
+      suite('DocumentFragment', function() {
+        test('Appends an element', () => {
+          const container = document.createDocumentFragment();
+          container.appendChild(document.createElement('div'));
+
+          const child = document.createElement('div');
+          container.append(child);
+
+          assert(child.parentNode === container);
+          assert(container.childNodes.length === 2);
+          assert(container.childNodes[1] === child);
+        });
+
+        test('Appends a text node', () => {
+          const container = document.createDocumentFragment();
+          container.appendChild(document.createElement('div'));
+
+          container.append('This is some text.');
+
+          assert(container.childNodes.length === 2);
+          assert(container.childNodes[1].nodeType === Node.TEXT_NODE);
+          assert(container.childNodes[1].textContent === 'This is some text.');
+        });
+
+        test('Appends multiple types of nodes', () => {
+          const container = document.createDocumentFragment();
+          container.appendChild(document.createElement('div'));
+
+          const child1 = document.createElement('div');
+          const child3 = document.createElement('div');
+          container.append(child1, 'This is some text.', child3);
+
+          assert(container.childNodes.length === 4);
+          assert(container.childNodes[1] === child1);
+          assert(container.childNodes[2].nodeType === Node.TEXT_NODE);
+          assert(container.childNodes[2].textContent === 'This is some text.');
+          assert(container.childNodes[3] === child3);
+        });
+      });
+
+      suite('Element', function() {
+        test('Appends an element', () => {
+          const container = document.createElement('div');
+          container.appendChild(document.createElement('div'));
+
+          const child = document.createElement('div');
+          container.append(child);
+
+          assert(child.parentNode === container);
+          assert(container.childNodes.length === 2);
+          assert(container.childNodes[1] === child);
+        });
+
+        test('Appends a text node', () => {
+          const container = document.createElement('div');
+          container.appendChild(document.createElement('div'));
+
+          container.append('This is some text.');
+
+          assert(container.childNodes.length === 2);
+          assert(container.childNodes[1].nodeType === Node.TEXT_NODE);
+          assert(container.childNodes[1].textContent === 'This is some text.');
+        });
+
+        test('Appends multiple types of nodes', () => {
+          const container = document.createElement('div');
+          container.appendChild(document.createElement('div'));
+
+          const child1 = document.createElement('div');
+          const child3 = document.createElement('div');
+          container.append(child1, 'This is some text.', child3);
+
+          assert(container.childNodes.length === 4);
+          assert(container.childNodes[1] === child1);
+          assert(container.childNodes[2].nodeType === Node.TEXT_NODE);
+          assert(container.childNodes[2].textContent === 'This is some text.');
+          assert(container.childNodes[3] === child3);
+        });
+      });
+    });
+  </script>
+</body>
+</html>

packages/tests/webcomponentsjs_/parent-node/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<script src="../../../../node_modules/wct-browser-legacy/browser.js"></script>
+<script>
+  WCT.loadSuites([
+    './append.html',
+    './prepend.html',
+    './replace-children.html',
+  ]);
+</script>