编写v1嵌套Web组件 [英] Composing v1 nested web components

问题描述

我是webcomponents的新手。由于web组件的v1可用，我从那里开始。我已经在网上阅读了关于他们的各种帖子。我对正确编写它们特别感兴趣。我已经阅读了有关插槽并让它们正常工作的信息，尽管我的努力并未导致按照我的预期方式工作的插槽web组件。

I'm new to webcomponents. Since v1 of webcomponents is available, I'm starting there. I have read various posts around the web about them. I'm particularly interested in composing them correctly. I have read about slots and have them working, although my efforts have not resulted in slotted webcomponents that work the way I expected.

如果我编写了这样的嵌套Web组件，嵌套/开槽的web组件中的DOM不会插入父级的插槽中：

If I have compose nested web components like this, the DOM from the nested/slotted webcomponent does not get inserted in the slot of the parent:

<parent-component>
  <child-component slot="child"></child-component>
</parent-component>

这里是父网页组件HTML：

And here's the parent webcomponent HTML:

<div id="civ">
  <style>
  </style>
  <slot id="slot1" name="child"></slot>
</div>

由于每个web组件（父组件和子组件）都是独立的，我一直在创建它们：

Since each webcomponent (parent and child) is written to be independent, I have been creating them with:

customElements.define('component-name', class extends HTMLElement {
  constructor() {
    super();
    this.shadowRoot = this.attachShadow({mode: 'open'});
    this.shadowRoot.innterHTML = `HTML markup`
  }
})

生成的DOM包含2个阴影根。我试图编写没有阴影dom的子/插槽元素，这也不会导致托管孩子的父阴影dom。

The resulting DOM includes 2 shadow roots. I have attempted to write child/slotted elements without shadow dom, which also does not result in the parent shadow dom hosting the children.

那么，什么是正确的方法撰写v1嵌套webcomponents？

So, what is the right way to compose v1 nested webcomponents?

推荐答案

首先，你必须使用一个实现Shadow DOM和Custom Elements v1的浏览器。

然后调用 attachShadow（）会自动将新的Shadow DOM分配给只读属性 shadowRoot 。

Then the call to attachShadow() will assign the new Shadow DOM automatically to the read-only property shadowRoot.

您可以将HTML代码附加到Shadow DOM的 innerHTML 但我建议使用< template> 的内容相反。

You can append the HTML code to the Shadow DOM's innerHTML but I'd recommend to use a <template>'s content property instead.

然后嵌套很自然：

customElements.define( 'parent-component', class extends HTMLElement {
    constructor() {
        super()
        this.attachShadow( {mode: 'open'} )
        this.shadowRoot.appendChild( parent1.content.cloneNode( true ) )
    }
} )
            
customElements.define( 'child-component', class extends HTMLElement {
    constructor() {
        super()
        var sh = this.attachShadow( {mode: 'open'} )
        sh.appendChild( child1.content.cloneNode( true ) )
    }
} )

<parent-component>
    <child-component slot="child">
        <span>Hello</span>
    </child-component>
</parent-component>


<template id="parent1">
    <style>
        :host { background: lightblue ; display: inline-block }
        ::slotted( [slot=child] ) { background: lightyellow }
    </style>
    <h4>(parent)</h4>
    <p>Slotted child:
        <slot name="child"></slot>
    </p>
</template>    

<template id="child1">
    <style>
        :host { display: inline-block }
        ::slotted( span ) { background: pink }
    </style>
    <h5>(child)</h5>
    <span>Nested slot: <slot></slot></span>
</template>

在< style> 标签中，使用：

• ：host 设置自定义元素的样式，


• :: slotted（）设置使用< slot> 标记插入的元素的样式。

• :host to style the custom element itself, and
• ::slotted() to style the elements inserted with a <slot> tag.

这篇关于编写v1嵌套Web组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！