模板的 <style> 标签内的 <content> 标签？

Question

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

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

在<the-color> 的<template> 标签中，我需要它为<a-component> 应用background-color: <any color>。这是我目前所拥有的：

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

如何使它从<content> 变为“红色”并将其应用于background-color: red 到<a-component>？此外，我正在使用 Shadow DOM 通过运行时 Javascript 将模板插入到页面中。谢谢！

Answer 1

我不认为<content> 标签是从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
            }
        }
    } )
} )

---

但是如果你想通过<template>里面的<content>获取值，你可以使用getDistributedNodes方法：

document.registerElement('a-component', {
  prototype: Object.create(HTMLElement.prototype, {
    createdCallback: {
      value: function() {
        //apply template to Shadow DOM
        var root = this.createShadowRoot()
        root.appendChild(document.importNode(template.content, true))
        
        //select the content tag, then get the inserted node
        var content = root.querySelector('content[select=the-color]')
        var nodes = content.getDistributedNodes()
        
        //apply the content of the first node to the style's property
        color = nodes[0].textContent
        this.style.backgroundColor = color
      }
    }
  })
})

<template id='template'>
  I'm a <content select='the-color'></content> component
</template>
<a-component>
  <the-color>red</the-color>
</a-component>