G.C*_*Sun 1 javascript web-component polymer polymer-2.x
我想创建一个新元素并附加到上的#container部分中connectedCallback。我this.shadowRoot.querySelector("#container")用来选择元素，但总是返回null。如何在阴影根中选择元素？
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
</head>
<body>
<dom-module id="dom-element">
<template>
<div id="container">
<p>I'm a DOM element. This is my shadow DOM!</p>
</div>
</template>
<script>
class DomElement extends Polymer.Element {
connectedCallback() {
this.attachShadow({
mode: "open"
})
console.log(this.shadowRoot.querySelector("#container"))
}
static get is() {
return "dom-element";
}
}
customElements.define(DomElement.is, DomElement);
</script>
</dom-module>
<dom-element></dom-element>
</body>
</html>在Polymer.Element已经附着了一层阴影根，所以你不需要做自己在做connectedCallback()。更重要的是，您的自定义connectedCallback()必须要求super.connectedCallback()正确的操作。它看起来应该像这样：
connectedCallback() {
super.connectedCallback(); // DO THIS
// this.attachShadow(...) // DON'T DO THIS
console.log('container', this.shadowRoot.querySelector("#container"));
}
| 归档时间： |
|
| 查看次数： |
7120 次 |
| 最近记录： |