Polymer2.0- Trying to download DIV content of custom element

问题

I am trying to download div content of custom element using document.getElementById of the div and trying to implement download option from the JS FIddle - http://jsfiddle.net/evx9stLb/

From console, I am getting below error
pen.js:6 Uncaught TypeError: Cannot read property 'innerHTML' of null at download (pen.js:6) at HTMLButtonElement.onclick (index.html:15)

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="iron-collapse/iron-collapse.html">
</head>
<body>

  <x-foo></x-foo>

<button onClick="download()">Download</button>
  <dom-module id="x-foo">
    <template>

      <button on-click="toggle">toggle collapse</button>
      <div id="content">
<iron-collapse id="collapse">
  <div>Content goes here...</div>
</iron-collapse>
      </div>
    </template>
  </dom-module>
</body>

JS:

function download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + document.getElementById("content").innerHTML;
    a.click();
}


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

      static get properties() {
        return {};

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

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

Code which I am below - https://codepen.io/nagasai/pen/ZyRKxj

回答1:

Make some updates, and help this would help,

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="iron-collapse/iron-collapse.html">
</head>
<body>

  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
<button on-click="download">Download</button>

      <button on-click="toggle">toggle collapse</button>
      <div id="content">
<iron-collapse id="collapse">
  <div>Content goes here...</div>
</iron-collapse>
      </div>
    </template>
  </dom-module>
</body>

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

      static get properties() {
        return {};

      }
         toggle() {
    this.$.collapse.toggle();
  }
download(){
    var a = document.body.appendChild(
        document.createElement("a")
    );
    a.download = "export.html";
    a.href = "data:text/html," + this.$.content.innerHTML;
    a.click();
  console.log(this.$.content.innerHTML);
}

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

https://codepen.io/renfeng/pen/BZOQro

回答2:

a document query (on light dom) won't pierce the shadowDom. To do that you have to specifically select the element and query it's shadowRoot.

it would look something like this

a.href = "data:text/html," + document.getElementsByTagName('x-foo')[0].shadowRoot.querySelector('#content').innerHTML;

BUT only do this if you can't modify the element itself. It's not nice to stir around in someone else's shadowRoot.

As shown by Frank R. its far better to modify the element itself and provide a download functionality.

You can trigger this easily from an external element with something like

document.getElementsByTagName('x-foo')[0].download();

回答3:

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.

So, No, you simply can not get the shadow DOM contents via innerHTML.

There used to be access now deprecated to shadowDOM via vanilla javascript earlier and also discussed here However, with shadow DOM V1 beig the norm now, you may have to just wait and watch if you can pierce the shadowDOM

An alternative would be, to move your entire DOM in the custom element, outside of it, Using Slots.

Slots distribute content, so, the page that uses your element, can access it via innerHTML.

You could possibly try hacky ways like the one mentioned here

来源：https://stackoverflow.com/questions/44961934/polymer2-0-trying-to-download-div-content-of-custom-element

标签

polymer