Polymer2.0-使用Shaow DOM可以下載完整的DOM內容嗎？

蔭試圖下載的定製元素它正在與編輯選項Polymer2.0-使用Shaow DOM可以下載完整的DOM內容嗎？

在上面的例子中更新後，我用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; 
}

來源

2017-08-01 Naga Sai A

的[Polymer2.0-嘗試下載自定義元素的DIV內容]可能的複製（HTTPS較早的堆棧溢出討論引用離開了相同的答案：//計算器.COM /問題/ 44961934/polymer2-0，試圖對下載-DIV化內容的定製元素） –

-1

陰影下的DOM根目錄或影子DOM無法通過innerHTML訪問。它不應該是。只是它設計的工作方式。除非您正在設計自定義元素並通過插槽公開DOM。或者，已發佈的元素以某種方式公開其DOM。

你可能嘗試像一個父DIV提到here 而是直接innerHTML你想要的東西不會讓你哈克的方式。

此外，在Your exact same query與刺入影子DOM

來源

2017-08-01 09:09:53

Polymer2.0-使用Shaow DOM可以下載完整的DOM內容嗎？

回答

相關問題