Skip to content
This repository has been archived by the owner. It is now read-only.

Element#insertAdjacentHTML is unsupported #104

Closed
javan opened this issue Jun 23, 2017 · 5 comments
Closed

Element#insertAdjacentHTML is unsupported #104

javan opened this issue Jun 23, 2017 · 5 comments
Assignees

Comments

@javan
Copy link

@javan javan commented Jun 23, 2017

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 screen shot 2017-06-23 at 4 07 17 pm
@benfrancis
Copy link

@benfrancis benfrancis commented Aug 9, 2017

This seems to work in Blink but not in Gecko.

@bicknellr bicknellr self-assigned this Sep 6, 2017
@jogibear9988
Copy link

@jogibear9988 jogibear9988 commented Nov 2, 2017

same problem on my system using ff nightly

@jogibear9988
Copy link

@jogibear9988 jogibear9988 commented Nov 2, 2017

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
Copy link

@dartess dartess commented Jan 3, 2018

I include polyfill if the customElements works through polyfill:

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

@bicknellr bicknellr commented Mar 28, 2018

Fixed in #147.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.