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

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> 中获取 "red" 并将其应用到 background-color: red 到 <a-component>？此外，我使用 Shadow DOM 通过运行-time 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>

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

<content> tag inside <style> tags for templates?

css

html

web-component

html5-template