Polymer2.0-嘗試下載自定義元素

我想下載使用的div的document.getElementById自定義元素的DIV內容，並試圖實現從JS小提琴下載選項的DIV內容 - http://jsfiddle.net/evx9stLb/Polymer2.0-嘗試下載自定義元素

從控制檯，我得到以下錯誤
pen.js：6遺漏的類型錯誤：在下載無法讀取空的特性 '的innerHTML'（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

來源

2017-07-07 Naga Sai A

做一些更新，並幫助這會有所幫助，

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>

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-07 06:21:19

一個文件查詢（光DOM）將不會刺穿shadowDom。要做到這一點，你必須專門選擇元素並查詢它的shadowRoot。

它會是這個樣子

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

，但只有這樣做，如果你不能修改元素本身。在別人的影子根部攪動並不好。

如Frank R.所示，它更好地修改元素本身並提供下載功能。

您可以很容易地從外部元素的東西，如陰影根目錄下

document.getElementsByTagName('x-foo')[0].download();

來源

2017-07-07 06:33:12 daKmoR

DOM，或影子DOM觸發此，無法通過innerHTML訪問。它不應該是。就是這樣。

所以，不，你根本無法通過innerHTML獲得影子DOM內容。

曾經有訪問現在通過香草的javascript earlier 並討論here 但反對到shadowDOM，陰影DOM V1 beig常態現在，你可能要等一等，看你是否能刺破shadowDOM

另一種方法是，將自定義元素中的整個DOM移出它，使用Slots。

插槽分發內容，因此，使用元素的頁面可以通過innerHTML訪問它。

你可能會嘗試像上面提到的那種hacky方式here

來源

2017-08-01 10:44:25

Polymer2.0-嘗試下載自定義元素

回答

相關問題