htmldomapi.js parentNode does not work with shadowDOM / DocumentFragment

[ajmchambers]

Hello, I've recently been playing around with shadowDOM and snabbdom and have run into an issue trying to patch an element directly inside a shadowRoot.
(disclaimer: I'm still rather new to github and javascript in general, so do let me know if I'm doing it wrong.)

I'm trying to patch a div inside a shadowRoot as shown below:

<div>
  #shadow-root
    <div></div>
</div>

<div>
  #shadow-root
    <div id="test"></div>
</div>

The reason it is failing seems to be because shadowRoot is a DocumentFragment, and a DocumentFragment's children cannot refer to it using .parentElement.

// DocumentFragment
(function() {
  var div = document.createElement('div');
  var fragment = document.createDocumentFragment();
  fragment.appendChild(div);

  div.parentElement === null; // true
  div.parentNode; // #document-fragment
}());

// shadowDOM
(function() {
  var outerDiv = document.createElement('div');
  var innerDiv = document.createElement('div');
  outerDiv.attachShadow({mode: 'open'});
  var shadowRoot = outerDiv.shadowRoot;
  shadowRoot.appendChild(innerDiv);

  shadowRoot instanceof DocumentFragment; // true
  innerDiv.parentElement === null; // true
  innerDiv.parentNode; // #shadow-root (open)
}());

So I changed the parentNode function in htmldomapi.js to look like below and it now works.

function parentNode(node){
  return node.parentElement || node.parentNode;
}

As I mentioned im still pretty new to all this and I'm not really familiar with the codebase, do you think this would be a safe change to make?

Cheers!

[jbwyme]

👍 We're evaluating snabbdom and we'll need compatibility with ShadowDOM as well. We'll also need support for extending native elements. I'll open up a PR shortly with these changes.

[mreinstein]

I've run into this issue too, where I'd like to attach a shadow dom to a snabbdom element that is being painted into.

[mreinstein]

I believe this is actually resolved via fa88c0e#diff-b06da8b5eaf15ddfe5341deaeef13cb9c94546db8b0bd927dd358142aa4fc3c7 and this issue can be closed.

@jvanbruegge what do you think?

[jvanbruegge]

Yes, if not, please open a new issue