Polymer2.0-尝试下载自定义元素的DIV内容 [英] Polymer2.0- Trying to download DIV content of custom element
问题描述
我正在尝试使用div的document.getElementById下载自定义元素的div内容，并尝试从JS FIddle实现下载选项-
I am trying to download div content of custom element using document.getElementById of the div and trying to implement download option from the JS FIddle - http://jsfiddle.net/evx9stLb/
从控制台，我得到以下错误提示
pen.js:6未捕获的TypeError:无法读取null的属性"innerHTML"
下载时(pen.js:6)
在HTMLButtonElement.onclick(index.html:15)
From console, I am getting below error
pen.js:6 Uncaught TypeError: Cannot read property 'innerHTML' of null
at download (pen.js:6)
at 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
推荐答案
DOM.不应该这样.就是这样.
DOM under the shadow Root, or the shadow DOM, can not be accessed via innerHTML. It is not supposed to be. Just the way it is.
所以，不，您根本无法通过innerHTML获取卷影DOM内容.
So, No, you simply can not get the shadow DOM contents via innerHTML.
过去曾经通过香草javascript 此处中进行了讨论 但是，现在使用影子DOM V1成为规范，您可能只需要等待并观察是否可以刺穿shadowDOM
There used to be access now deprecated to shadowDOM via vanilla javascript earlier and also discussed here However, with shadow DOM V1 beig the norm now, you may have to just wait and watch if you can pierce the shadowDOM
另一种选择是，使用槽将整个DOM移到自定义元素的外部，
An alternative would be, to move your entire DOM in the custom element, outside of it, Using Slots.
插槽分配内容，因此，使用您的元素的页面可以通过innerHTML进行访问.
Slots distribute content, so, the page that uses your element, can access it via innerHTML.
您可以尝试使用类似此处所述的方法
这篇关于Polymer2.0-尝试下载自定义元素的DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
