javascript – 如何设置用于构造自定义元素的元素？

2019年7月28日 158次阅读 
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>
点赞