我创建了基于简单铁标签的Google Polymer自定义元素(动作标签)。我给了元素一个ActionEnabledLabel的id。
<template>
<style>
:host {
display: block;
padding: 16px;
}
.buttons {
background-color: #936d79;
color:white;
height:30px;
font-size: 12px;
}
.ModelName {
width:200px;
color:white;
}
.labels {
width:200px;
color:white;
}
</style>
<table class="header1"
id="header1">
<td>
<paper-input id="ModelName" class="ModelName" value='{{vmodelName}}' pattern="[A-Z]{2}[0-9]{6}"></paper-input>
</td>
<td>
<paper-button id="SetModelNameButton" raised class="buttons" on-click="_SetModelName">Set</paper-button>
</td>
<td>
<paper-button id="ModelButton" raised class="buttons" on-tap="StartModeling">Modeling</paper-button>
</td>
<td>
<action-label id="ActionEnabledLabel" class="ActionEnabledLabel"></action-label>
</td>
</table>
<modeler-workspace></modeler-workspace>
</template>
现在我想选择这个对象。
<script>
var ModelerNavBarStatus = false;
// Your new element extends the Polymer.Element base class
class ModelerApp extends Polymer.Element {
static get is() { return 'modeler-app'; }
StartModeling() {
d3.json("../jsondata/buttons.json", function (error, data) {
var vdata = data.ModelerButtons;
if (ModelerNavBarStatus == false) {
ModelerNavBarStatus = true;
console.log("d3.select(#ActionEnabledLabel): " + d3.select("#ActionEnabledLabel").attr("id"));
}
})
}
}
//Now, register your new custom element so the browser can use it
customElements.define(ModelerApp.is, ModelerApp);
</script>
我得到的回复是
Uncaught TypeError: Cannot read property 'getAttribute' of null
at ut.attr (d3.v4.min.js:2)
at modeler-app.html:79
at Object.<anonymous> (d3.v4.min.js:2)
at k.call (d3.v4.min.js:2)
at XMLHttpRequest.e (d3.v4.min.js:2)
我已经在这方面工作了一个星期......我否认d3.select不会对抗Shadow DOM ...我喜欢我的d3js ...请不要让我参与其中。 ...