0

我正在尝试使用 div 的 document.getElementById 下载自定义元素的 div 内容，并尝试从 JS Fiddle 实现下载选项 - http://jsfiddle.net/evx9stLb/

从控制台，我得到以下错误
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);

我在下面的代码 - https://codepen.io/nagasai/pen/ZyRKxj

4

3 回答 3

0

文档查询（在 light dom 上）不会穿透 shadowDom。为此，您必须专门选择元素并查询它的 shadowRoot。

它看起来像这样

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

但仅当您无法修改元素本身时才这样做。在别人的 shadowRoot 中搅动可不是什么好事。

正如 Frank R. 所示，修改元素本身并提供下载功能要好得多。

您可以使用类似的外部元素轻松触发此操作

document.getElementsByTagName('x-foo')[0].download();
于 2017-07-07T06:33:12.137 回答
0

shadow Root 下的 DOM，或者 shadow DOM，不能通过innerHTML. 它不应该是。就是这样。

所以，不，你根本无法通过 innerHTML.

以前通过 vanilla javascript访问shadowDOM现在已弃用，并且在此处 也进行了讨论 但是，随着 shadow DOM V1 现在成为常态，您可能只需要等待并观察是否可以刺穿 shadowDOM

另一种方法是，将整个 DOM 移动到自定义元素之外，使用插槽。

插槽分发内容，因此使用您的元素的页面可以通过innerHTML.

你可能会尝试像这里提到的那样的 hacky 方法

于 2017-08-01T10:44:25.627 回答
0

进行一些更新，并帮助这将有所帮助，

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

于 2017-07-07T06:21:19.553 回答