在没有 disconnectedCallback 的情况下将元素从光 DOM 移动到阴影 DOM

Question

我想知道我是否在正确的轨道上

Objective: 需要确保所有元素最终都在阴影中DOM

所以手动创建了HTML文件

<cardts-pile>
  <cardts-card>A</cardts-card>
  <cardts-card>B</cardts-card>
</cardts-pile>

在 <cardts-pile>

的 lightDOM 中创建卡片

如果我然后将它们移动到阴影DOM（当然）：

► <cardts-card> 从 DOM 中移除（触发 disconnectedCallback()）
► <cardts-card>再次添加（触发connectedCallback()）

[参见下面运行 Code Snipper 上的 console.log]

我在 card.connectedCallback()
中有更多花哨的代码在 're-connect' 上，它基本上触发了完全相同的 same 代码 again.

问题

是否可以在不进行 DOM 更改的情况下移动节点？
是否有 OOTB 代码来检查 现有的 <cardts-card> 是否仅被移动，
所以 connectedCallback 知道它不需要再次运行编码。
我应该做些不同的事情吗，
使那些光 DOM 元素立即进入阴影 DOM？

customElements.define('cardts-pile', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'}).innerHTML='<slot></slot>';
  }
  connectedCallback() {
    console.log('connect pile');
  }
});

customElements.define('cardts-card', class extends HTMLElement {
  constructor(){
    super();
    this.attachShadow({mode: 'open'}).innerHTML='<slot></slot>';
  }
  connectedCallback() {
    console.log('connect card',this.innerText);
    if (!this.getRootNode().host) // not in shadowDOM
       this.parentNode.shadowRoot.insertBefore(this,null);//or appendChild
  }
  disconnectedCallback() {
    console.log('disconnect card',this.innerText);
  }
});

<cardts-pile>
  <cardts-card>A</cardts-card>
  <cardts-card>B</cardts-card>
</cardts-pile>

Answer 1

Is it possible to move nodes without DOM changes?

没有（据我所知关于 Shadow DOM）。

Is there OOTB code to check if an existing is only being moved?

我会使用布尔标志：

connectedCallback() {
    if ( !this.connected )
        console.log( 'creation' )
    else {
        console.log( 'move' )
    this.connected = true   
}

（或 disconnectedCallack）

customElements.define('cardts-pile', class extends HTMLElement {
    constructor(){
        super();
        this.attachShadow({mode: 'open'}).innerHTML='<slot></slot>';
        this.shadowRoot.addEventListener( 'slotchange', ev => {      
            let node = this.querySelector( 'cardts-card' )
            node && this.shadowRoot.append( node )
        })
    }
    connectedCallback() {
        console.log('connect pile');
    }
});
    
customElements.define('cardts-card', class extends HTMLElement {
    constructor(){
        super();
        this.attachShadow({mode: 'open'}).innerHTML='<slot></slot>';
    }
    connectedCallback() {
        if ( !this.connected )
            console.log( this.innerText + ' created' )
        else 
            console.log( this.innerText + ' moved' )
        this.connected = true 
    }
    disconnectedCallback() {
        if ( !this.moved )
            console.log( 'moving ' + this.innerText );
        else 
            console.log( 'really disconnected' )
        this.moved = true
    }
});

<cardts-pile>
  <cardts-card>A</cardts-card>
  <cardts-card>B</cardts-card>
</cardts-pile>

Should I be doing something different?

您可以仅在移动 unknown 元素后定义或升级 <cardts-card>，如果可能的话，但我认为这不是一个好的做法，除非您可以控制整个执行时间，例如 whenDefined() 或有序 HTML 和 Javascript 代码：

customElements.define('cardts-pile', Pile)
customElements.whenDefined('cardts-pile').then(() => 
    customElements.define('cardts-card', Card)
)

在下面的示例中，您在 class Card 之前或之后定义 class Pile（取决于它们的相关性）。

class Card extends HTMLElement {
    constructor(){
        super()
        this.attachShadow({mode: 'open'}).innerHTML='<slot></slot>'
    }
    connectedCallback() {
        console.log(this.innerText + ' connected')
    }
    disconnectedCallback() {
         console.log(this.innerText + ' disconnected')
    }
}

class Pile extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({mode: 'open'})
    }
    connectedCallback() {
        console.log('connect pile')
        this.shadowRoot.append(...this.querySelectorAll('cardts-card'))
    }
}

window.onload = () => customElements.define('cardts-pile', Pile)
customElements.whenDefined('cardts-pile').then(() => 
    customElements.define('cardts-card', Card)
)

<cardts-pile>
  <cardts-card>A</cardts-card>
  <cardts-card>B</cardts-card>
</cardts-pile>

在没有 disconnectedCallback 的情况下将元素从光 DOM 移动到阴影 DOM

moving element from light DOM to ShadowDOM without disconnectedCallback

javascript

web-component

shadow-dom

custom-element

native-web-component

问题