Question

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

＆＃xA;＆＃xA;

 ＆lt; a-component＆gt;＆＃xA; ＆lt; the-color＆gt; red＆lt; / the-color＆gt;＆＃xA;＆lt; / a-component＆gt;＆＃xA;

＆＃xA;＆＃xA;

在我的< ＆lt; the-color＆gt; 的代码>＆lt; template＆gt; 标签，我需要它为 background-color：＆lt; any color＆gt; >＆LT;一个-成分＆gt; 。以下是我到目前为止的内容：

＆＃xA;＆＃xA;  ＆lt; style＆gt;＆＃xA; ：主持人{＆＃xA; display：inline-block;＆＃xA; }＆＃xA;＆lt; / style＆gt;＆＃xA;  
＆＃xA;＆＃xA; 如何从＆lt; content＆gt;中取出“红色” 并将 background-color：red 应用于＆lt; a-component＆gt; ？此外，我正在使用Shadow DOM通过运行时Javascript将模板插入页面。 ！谢谢＆＃XA;

Answer 1

我不认为<content>标记是从DOM中提取字符串以设置CSS规则的最佳方式。

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

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
            }
        }
    } )
} )

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

＆＃13;

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
      }
    }
  })
})

＆＃13;

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

＆＃13;

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

1 个答案: