编写v1嵌套Web组件-Java 学习之路

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

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

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

这是父webcomponent HTML：

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

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

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

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

那么，构建v1嵌套web组件的正确方法是什么？

1 回答

首先，您必须使用a browser that implements Shadow DOM and Custom Elements v1 .

然后调用 attachShadow() 将自动将新的Shadow DOM分配给read-only属性 shadowRoot .

您可以将HTML代码附加到Shadow DOM的 innerHTML 但我建议使用 <template> 的 content 属性 .

然后嵌套很自然：

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> 标记插入的元素设置样式 .

回复于 2024-04-28T13:06:52+08:00

编写v1嵌套Web组件

1 回答

相关问题