Я пытаюсь загрузить содержимое div пользовательского элемента с помощью document.getElementById элемента div и пытаюсь реализовать вариант загрузки из файла JS FIddle - http://jsfiddle.net/evx9stLb/

С консоли я получаю сообщение об ошибке ниже
pen.js: 6 Uncaught TypeError: Невозможно прочитать свойство innerHTML со значением NULL. при загрузке (pen.js: 6) в 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

0
Naga Sai A 7 Июл 2017 в 06:07

3 ответа

Сделайте некоторые обновления, и это поможет,

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
Frank R. 7 Июл 2017 в 09:21

Запрос документа (на светлом домене) не пробьет shadowDom. Для этого вам нужно специально выбрать элемент и запросить его shadowRoot.

Это будет выглядеть примерно так

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

НО делайте это только в том случае, если вы не можете изменить сам элемент. Нехорошо шевелиться в чужой shadowRoot.

Как показал Фрэнк Р., гораздо лучше изменить сам элемент и обеспечить возможность загрузки.

Вы можете легко запустить это из внешнего элемента с чем-то вроде

document.getElementsByTagName('x-foo')[0].download();
0
daKmoR 7 Июл 2017 в 09:33

DOM под теневым корнем или теневой DOM недоступен через innerHTML. Этого не должно быть. Просто так оно и есть.

Итак, нет, вы просто не можете получить содержимое теневого DOM через innerHTML.

Раньше был доступ теперь не рекомендуется к shadowDOM через ванильный javascript ранее а также обсуждались здесь Однако с теневым DOM V1, который сейчас стал нормой, вам, возможно, придется просто подождать и посмотреть, сможете ли вы пробить shadowDOM.

Альтернативой может быть перемещение всей вашей модели DOM в настраиваемый элемент за его пределы с помощью слотов.

Слоты распределяют контент, поэтому страница, использующая ваш элемент, может получить к нему доступ через innerHTML.

Вы могли бы попробовать хакерские способы, подобные упомянутому здесь

0
Schrodinger's cat 1 Авг 2017 в 15:29