Polymer2.0- Trying to download DIV content of cust

2019-08-17 17:54发布

站内问答 / 前端开发
1401 3 6

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

3条回答
\"骚年 ilove
2楼-- · 2019-08-17 18:43

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();
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
3楼-- · 2019-08-17 18:50

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

查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
4楼-- · 2019-08-17 18:56

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>

JS

    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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)