Css <；内容>；标记内部<；风格>；模板的标签？

我正在编写Web组件的演示，我的标记结构如下：

<a-component>
    <the-color>red</the-color>
</a-component>

红色

在我的

标签中，我需要它为

应用

背景色：

。以下是我目前掌握的情况：

<style>
      :host {
        display: inline-block;
      }
</style>

：主持人{
显示：内联块；
}

如何使其从

中提取“红色”，并将

背景色：红色应用于
？此外，我还使用shadowdom通过运行时Javascript将模板插入页面。谢谢
 我不认为
标记是从DOM中提取字符串以设置CSS规则的最佳方法

相反，您可以在自定义元素的
createdCallback
方法中直接使用
this.querySelector（'the-color'）.textContent
：

document.registerElement( 'a-component', { 
    prototype: Object.create( HTMLElement.prototype, {
        createdCallback: {
            value: function () 
            {
                var root = this.createShadowRoot()
                root.appendChild( document.importNode( template.content, true ) )
                this.style.backgroundColor = this.querySelector( 'the-color' ).textContent
            }
        }
    } )
} )


但是，如果要通过
中的
获取值，可以使用
getDistributedNodes
方法：


document.registerement（'a-component'）{
prototype:Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
//将模板应用于阴影DOM
var root=this.createShadowRoot（）
appendChild（document.importNode（template.content，true））
//选择内容标记，然后获取插入的节点
var content=root.querySelector（'content[select=the color]'））
var nodes=content.getDistributedNodes（）
//将第一个节点的内容应用于样式的属性
颜色=节点[0]。文本内容
this.style.backgroundColor=颜色
}
}
})
})

我是一个组件
红色
我认为
标记不是从DOM中提取字符串以设置CSS规则的最佳方法

相反，您可以在自定义元素的
createdCallback
方法中直接使用
this.querySelector（'the-color'）.textContent
：

document.registerElement( 'a-component', { 
    prototype: Object.create( HTMLElement.prototype, {
        createdCallback: {
            value: function () 
            {
                var root = this.createShadowRoot()
                root.appendChild( document.importNode( template.content, true ) )
                this.style.backgroundColor = this.querySelector( 'the-color' ).textContent
            }
        }
    } )
} )


但是，如果要通过
中的
获取值，可以使用
getDistributedNodes
方法：


document.registerement（'a-component'）{
prototype:Object.create（HTMLElement.prototype{
createdCallback：{
值：函数（）{
//将模板应用于阴影DOM
var root=this.createShadowRoot（）
appendChild（document.importNode（template.content，true））
//选择内容标记，然后获取插入的节点
var content=root.querySelector（'content[select=the color]'））
var nodes=content.getDistributedNodes（）
//将第一个节点的内容应用于样式的属性
颜色=节点[0]。文本内容
this.style.backgroundColor=颜色
}
}
})
})

我是一个组件
红色
谢谢！我希望用CSS来做，但这没关系。另外，您可以解释为什么需要使用
getDistributedNodes
方法吗？因为您想要访问的元素
，不是影子DOM的一部分，所以不能通过
querySelector
来选择它。为了实现这一点，WebComponents提供了
content.getDistributedNodes
方法。它允许通过
标签访问插入的元素。谢谢！我真的很困惑谢谢你！我希望用CSS来做，但这没关系。另外，您可以解释为什么需要使用
getDistributedNodes
方法吗？因为您想要访问的元素
，不是影子DOM的一部分，所以不能通过
querySelector
来选择它。为了实现这一点，WebComponents提供了
content.getDistributedNodes
方法。它允许通过
标签访问插入的元素。谢谢！我真的很困惑