0

在使用编辑选项更新自定义元素后，我正在尝试下载自定义元素

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;
}
4

1 回答 1

-1

shadow Root下的DOM，或者shadow DOM，不能通过innerHTML访问。它不应该是。就像它设计的工作方式一样。除非您正在设计自定义元素并通过插槽公开 DOM。或者，发布的元素以某种方式暴露了它的 DOM。

你可以尝试像这里提到的那样的hacky方法 但是直接innerHTML在父母DIV身上不会得到你想要的东西。

此外，在您完全相同的查询中留下相同的答案，并参考早期关于刺穿 Shadow DOM 的 Stack Overflow 讨论

于 2017-08-01T09:09:53.913 回答