Element#insertAdjacentHTML is unsupported #104

javan · 2017-06-23T20:08:26Z

Custom elements inserted via insertAdjacentHTML are ignored / never upgraded.

Diff with failing tests

diff --git a/tests/html/Element/index.html b/tests/html/Element/index.html
index b771d37..872b872 100644
--- a/tests/html/Element/index.html
+++ b/tests/html/Element/index.html
@@ -9,5 +9,6 @@
     './removeAttribute.html',
     './removeAttributeNS.html',
     './insertAdjacentElement.html',
+    './insertAdjacentHTML.html'
   ]);
 </script>
diff --git a/tests/html/Element/insertAdjacentHTML.html b/tests/html/Element/insertAdjacentHTML.html
new file mode 100644
index 0000000..8dca1e6
--- /dev/null
+++ b/tests/html/Element/insertAdjacentHTML.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+<title>Element#insertAdjacentHTML</title>
+<script>
+  (window.customElements = window.customElements || {}).forcePolyfill = true;
+</script>
+<script src="../../../../es6-promise/dist/es6-promise.auto.min.js"></script>
+<script src="../../../../web-component-tester/browser.js"></script>
+<script src="../../../custom-elements.min.js"></script>
+</head>
+<body>
+<script>
+function generateLocalName() {
+  return 'test-element-' + Math.random().toString(32).substring(2);
+}
+
+function defineWithLocalName(localName, observedAttributes) {
+  customElements.define(localName, class extends HTMLElement {
+    constructor() {
+      super();
+      this.constructed = true;
+      this.connectedCallbackCount = 0;
+      this.disconnectedCallbackCount = 0;
+    }
+
+    connectedCallback() {
+      this.connectedCallbackCount++;
+    }
+
+    disconnectedCallback() {
+      this.disconnectedCallbackCount++;
+    }
+  });
+}
+
+suite('Custom elements in HTML strings are created using `insertAdjacentHTML`.', function() {
+  let localName;
+
+  setup(function() {
+    localName = generateLocalName();
+    defineWithLocalName(localName);
+  });
+
+  test('Disconnected context', function() {
+    const div = document.createElement('div');
+    div.insertAdjacentHTML('beforeend', `<${localName}></${localName}>`);
+
+    assert.equal(div.childNodes.length, 1);
+    assert.equal(div.childNodes[0].localName, localName);
+    assert.equal(div.childNodes[0].constructed, true);
+    assert.equal(div.childNodes[0].connectedCallbackCount, 0);
+    assert.equal(div.childNodes[0].disconnectedCallbackCount, 0);
+  });
+
+  test('Connected context', function() {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    div.insertAdjacentHTML('beforeend', `<${localName}></${localName}>`);
+
+    assert.equal(div.childNodes.length, 1);
+    assert.equal(div.childNodes[0].localName, localName);
+    assert.equal(div.childNodes[0].constructed, true);
+    assert.equal(div.childNodes[0].connectedCallbackCount, 1);
+    assert.equal(div.childNodes[0].disconnectedCallbackCount, 0);
+
+    document.body.removeChild(div);
+  });
+});
+</script>
+</body>
+</html>

Resulting failures

The text was updated successfully, but these errors were encountered:

benfrancis · 2017-08-09T14:43:55Z

This seems to work in Blink but not in Gecko.

jogibear9988 · 2017-11-02T21:46:55Z

same problem on my system using ff nightly

jogibear9988 · 2017-11-02T21:52:16Z

I've fixed using this https://gist.github.com/eligrey/1276030
I insert the code when I've firefox useragent...

if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
     // Do Firefox-related activities
}

dartess · 2018-01-03T14:37:07Z

I include polyfill if the customElements works through polyfill:

if ("polyfillWrapFlushCallback" in customElements) {
  // code from https://gist.github.com/eligrey/1276030 without "if"
}

bicknellr · 2018-03-28T18:04:37Z

Fixed in #147.

webcomponents/custom-elements#104

bicknellr self-assigned this Sep 6, 2017

This was referenced Jan 31, 2018

Fix custom elements added via insertAdjacentHTML never were upgraded github/include-fragment-element#33

Closed

Patch insertAdjacentHTML #141

Closed

javan mentioned this issue Mar 22, 2018

Custom Elements v1 support basecamp/trix#495

Closed

bicknellr closed this as completed Mar 28, 2018

javan added a commit to basecamp/trix that referenced this issue Jun 26, 2018

Avoid Element#insertAdjacentHTML

a63eb3b

webcomponents/custom-elements#104

javan mentioned this issue Jul 3, 2018

Custom Elements v1 (and v0) basecamp/trix#516

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Element#insertAdjacentHTML is unsupported #104

Element#insertAdjacentHTML is unsupported #104

javan commented Jun 23, 2017

benfrancis commented Aug 9, 2017

jogibear9988 commented Nov 2, 2017

jogibear9988 commented Nov 2, 2017

dartess commented Jan 3, 2018 •

edited

bicknellr commented Mar 28, 2018

Element#insertAdjacentHTML is unsupported #104

Element#insertAdjacentHTML is unsupported #104

Comments

javan commented Jun 23, 2017

benfrancis commented Aug 9, 2017

jogibear9988 commented Nov 2, 2017

jogibear9988 commented Nov 2, 2017

dartess commented Jan 3, 2018 • edited

bicknellr commented Mar 28, 2018

dartess commented Jan 3, 2018 •

edited