New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Element#insertAdjacentHTML is unsupported #104

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

Comments

Projects
None yet
5 participants
@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

This comment has been minimized.

Show comment
Hide comment
@benfrancis

benfrancis Aug 9, 2017

This seems to work in Blink but not in Gecko.

benfrancis commented Aug 9, 2017

This seems to work in Blink but not in Gecko.

@bicknellr bicknellr self-assigned this Sep 6, 2017

@jogibear9988

This comment has been minimized.

Show comment
Hide comment
@jogibear9988

jogibear9988 Nov 2, 2017

same problem on my system using ff nightly

jogibear9988 commented Nov 2, 2017

same problem on my system using ff nightly

@jogibear9988

This comment has been minimized.

Show comment
Hide comment
@jogibear9988

jogibear9988 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
}

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

This comment has been minimized.

Show comment
Hide comment
@dartess

dartess 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"
}

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

This comment has been minimized.

Show comment
Hide comment
@bicknellr

bicknellr Mar 28, 2018

Contributor

Fixed in #147.

Contributor

bicknellr commented Mar 28, 2018

Fixed in #147.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment