Polymer2.0- возможно ли получить полный контент DOM с помощью Shaow DOM для загрузки?

Я пытаюсь загрузить пользовательский элемент после его обновления с возможностью редактирования

https://codepen.io/nagasai/pen/PKNeMw

В приведенном выше примере я могу загрузить файл с пользовательским элементом x-foo, но когда я изменяю его значение и пытаюсь загрузить, я вижу только содержимое DOM и без теневого 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;
}
Источник

1 ответ

DOM под теневым Root или теневым DOM не может быть доступен через innerHTML. Это не должно быть. Просто так, как он предназначен для работы. Если вы не разрабатываете свой пользовательский элемент и не выставляете DOM через слоты. Или опубликованный элемент как-то выставляет свой DOM.

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

Кроме того, оставив тот же ответ на Ваш точно такой же запрос со ссылками на предыдущие обсуждения Stack Overflow о прохождении Shadow DOM

Источник
Другие вопросы по тегам