Missing elements assigned to a named slot, progress bar styling is missing

[cWenyu]

Can not convert assigned nodes of a named slot inside the shadow DOM

I want to convert a custom-defined DOM element into an image, but the content is missing also the progress bar styling is not correct. I have a sample example: Live example. By the way, Firefox displays different progress bar styling.

Expected behavior

The assigned element is been captured and converted, and the progress bar captures the correct styling.

Actual behavior (stack traces, console logs etc)

The assigned elements is missing and the progress bar is missing correct styling.

Library version

3.3.1

Solution

Need to update the following two functions to solve the slotted elements, for the progress bar, I have no idea yet.

// cloneNode => cloneChildren
  function getRenderedChildren(original) {
      if (util.isShadowSlotElement(original)) {
          const childElement = [
              ...original.childNodes, // default child elements inside the named slot
              ...original.assignedNodes(), // assigned node to the named slot
          ];

          return childElement;
      }

      return original.childNodes;
  }

// newUtil()
  function isInShadowRoot(value) {
      // Object.prototype.hasOwnProperty.call(value, 'getRootNode') always is false
      // MDN hasOwnProperty: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
      // hasOwnProperty returns a boolean indicating whether this object has the specified property as its own property
      // getRootNode is inherited from the prototype chain, and defined on the Node prototype
      return (
          value !== null &&
          'getRootNode' in value &&
          isShadowRoot(value.getRootNode())
      );
  }

Browsers

• [√] Chrome 49+
• [√ ] Firefox 45+

[IDisposable]

I can't seem to make this work with slotted elements without breaking other stuff.

[cWenyu]

Hi @IDisposable, I wrap the Live example and pull #179 into a zip file: DOM-to-iamge-more-example.zip, can you please have a try?

Maybe I missed some situation, but it will be great if you can add the case of #184, and send back to me, I can give a hand then. 😋

[IDisposable]

I've tried reverting your in changes and lots of other paths... can't seem to get it to work again. https://jsfiddle.net/IDisposable/Ltgefyxr/7/

[cWenyu]

I didn't get any errors when using in , I added more elements in the example file, see the follwing zip file.

Please check both isInShadowRoot() and getRenderedChildren() in index.js. I scanned the latest code and found an issue in getRenderedChildren, NodeList.length is a property rather than a funciton.

I haven't tried onclone feature, is it used for visual check or for programming test?

Thanks/Wenyu

DOM-to-iamge-more-example.zip

[IDisposable]

The onClone thing in the jsFiddle is handy to let you see what the cloned nodes look like before being rendered. It makes it much easier to catch style-copying issues.

https://jsfiddle.net/IDisposable/Ltgefyxr/9/ is the next version (with the upcoming release source inlined instead of pulled from a package)

[IDisposable]

Going to release this in 3.4.3 now that it works again.

[IDisposable]

Released and working with CDNJS v3.4.3 in fiddle https://jsfiddle.net/IDisposable/Ltgefyxr/13/