Polymer2.0- is it possible to get the complete DOM content with Shaow DOM to download?

Question

Iam trying to download the custom element after it is being updated with edit option

In the above example, I am able download file with x-foo custom element but when I edit the value of it and try to download , I can see only DOM content and without shadow DOM

HTML:

<head>
  <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="iron-collapse/iron-collapse.html">
</head>

<body>
  <div id="Preview">
    <x-foo></x-foo>
  </div>
  <dom-module id="x-foo">
    <template>
        <style>
            .actionIcons {
              position: absolute;
              top: 0;
              right: 0;
              opacity: 0;
              background: grey;
            }

            div.actionIcons iron-icon {
              padding: 7px;
            }

            div.actionIcons iron-icon:hover {
              background: lightblue;
            }

            .actionIcons:hover {
              opacity: 1;
            }
        </style>

        Hover Top Right hand hover to edit
        <div class="actionIcons">
          <iron-icon icon="icons:create" on-click="toggle"></iron-
            icon>
          <iron-icon icon="icons:content-copy"></iron-icon>
          <iron-icon icon="icons:close" onclick="deleteElem(event)">
          </iron-icon>
        </div>

        [[text]]

       <paper-input value="{{text::input}}"></paper-input>

       <iron-collapse id="collapse">

        Enter field name: <paper-input type="text" value="
           {{text::input}}" autofocus></paper-input>

       </iron-collapse>
    </template>
  </dom-module>

  <button onclick="downloadHtml()"><a id="downloadHtmlElem" 
    download>Download HTML</a></button>
</body>

JS:

class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {};

    }
       toggle() {
  this.$.collapse.toggle();
}

  }
  customElements.define(XFoo.is, XFoo);


let downloadHtml = () =>{
let a = document.getElementById('downloadHtmlElem')
a.download = "index.html";
a.href = "data:text/text," + document.getElementById("Preview").innerHTML;
}

Possible duplicate of [Polymer2.0- Trying to download DIV content of custom element](https://stackoverflow.com/questions/44961934/polymer2-0-trying-to-download-div-content-of-custom-element) — Schrodinger's cat, Aug 01 '17 at 10:41

Schrodinger's cat · Answer 1 · 2017-08-01T12:29:10.040

DOM under the shadow Root, or the shadow DOM, can not be accessed via innerHTML. It is not supposed to be. Just the way it is designed to work. Unless you are designing your custom element and expose the DOM via Slots. Or, the published element exposes its DOM somehow.

You could possibly try hacky ways like the one mentioned here But a direct innerHTML on the parent DIV wouldn't get you what you want.

Also, Leaving the same answer at Your exact same query with references to earlier Stack Overflow discussions on piercing the Shadow DOM

Polymer2.0- is it possible to get the complete DOM content with Shaow DOM to download?

1 Answers1