javascript – 如何设置用于构造自定义元素的元素?
作者:互联网
class MyElement extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({mode: 'open'})
shadow.appendChild(document.createTextNode('Yadda blah'))
const span = document.createElement('span')
span.appendChild(document.createTextNode('Can I style U?'))
shadow.appendChild(span)
}
}
customElements.define('my-element', MyElement)
my-element {
border: 1px solid black;
}
span {
font-weight: bold;
}
<my-element></my-element>
正如您所看到的,my-element是样式化的,但是my-element中使用的span不是.甚至没有在样式表中说my-element span {font-weight:bold;}使得任何样式都有效.
有没有办法在这个范围内应用样式?
解决方法:
这是影子dom的预期行为.由于您的HTML看起来像< my-element>< / my-element>,因此您可以从css中定位my-element,但跨度不是实际dom的一部分,因此您无法定位它.
您只能在阴影dom上下文中将样式应用于范围.
在这种情况下有更好的方法来定义css,但只是为了说明一点,下面将样式应用于span,而不是my-element:
class MyElement extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({mode: 'open'})
shadow.appendChild(document.createTextNode('Yadda blah'))
const span = document.createElement('span')
span.appendChild(document.createTextNode('Can I style U?'))
shadow.appendChild(span)
const styleTag = document.createElement('style')
styleTag.innerHTML = `
my-element {
border: 1px solid black;
}
span {
font-weight: bold;
}
`
shadow.appendChild(styleTag)
}
}
customElements.define('my-element', MyElement)
<my-element></my-element>
标签:javascript,css,custom-element 来源: https://codeday.me/bug/20190705/1387300.html