Webコンポーネント内でLight DOMを参照する

Question

私はskate.jsを使用しており、検証と操作のためにWebコンポーネントのLight DOMを参照しようとしています。私はそれがあることを検証し、シャドウDOMラベルがfor属性でそれを参照する使用することができますので、それにIDを追加するためのチェックボックスを参照しようとしている

<res-checkbox> 
    <label slot="label">This is res-checkbox</label> 
    <input slot="checkbox" type="checkbox" id="test-id" /> 
</res-checkbox> 

：コンポーネントは次のようになります。しかし、コンポーネントがレンダリングされた後に、その参照方法を理解することはできません。

import { Component, h, define, prop } from 'skatejs'; 

export class ResComponent extends Component { 

    static get is() { return 'res-checkbox'; } 

    renderedCallback() { 
    console.log(this.querySelector('input[type="checkbox]')); 
    // -> null 
    console.log(this.getElementsByTagName('input')[0]); 
    // -> undefined 
    console.log(this.shadowRoot.querySelector('input[type="checkbox]')); 
    // -> null 
    console.log(this.shadowRoot.getElementById('checkbox').querySelector('input')); 
    // -> null 
    console.log(this.shadowRoot.getElementById('checkbox').assignedNodes()); 
    // -> [] 
    console.log(this.childNodes[1]); 
    // -> undefined 
    console.log(this.children[1]); 
    // -> undefined 
    } 

    renderCallback() { 
    return <div id="wrap"> 
     <slot name="label" id="label"></slot> 
     <label id="fakeCheckbox"> 
     <slot name="checkbox" id="checkbox"></slot> 
     </label> 
    </div>; 
    } 

} 

define(ResComponent); 

ウェブコンポーネントで軽いDOMを参照するにはどうすればよいですか？

Answer 1

光DOMは普通のDOMあるので、あなたはいつものように内部の要素を参照することができます。

var input = this.querySelector('input[type="checkbox"]')) 
var label = this.getElementsByTagName('label')[0] 

あなたの例が動作しない場合は、多分それは方法renderedCallback()が正しい方法と呼ばれていないですので、 、または適切な時に。以下は

は "バニラ" のJavaScript（申し訳ありませんが、私はSkateJSをknwowません）

customElements.define('res-checkbox', class extends HTMLElement { 
 
    constructor() { 
 
    super() 
 
    this.attachShadow({ mode: 'open' }) 
 
     .innerHTML = `<div id="wrap"> 
 
     <slot name="label" id="label"></slot> 
 
     <label id="fakeCheckbox"> 
 
      <slot name="checkbox" id="checkbox"></slot> 
 
     </label> 
 
     </div>` 
 
    } 
 

 
    connectedCallback() { 
 
    var input = this.querySelector('input[type="checkbox"]') 
 
    var label = this.querySelector('label') 
 
    console.log(input, label) 
 
    label.setAttribute('for', input.id) 
 
    } 
 
})

<res-checkbox> 
 
    <label slot="label">This is res-checkbox</label> 
 
    <input slot="checkbox" type="checkbox" id="test-id"> 
 
</res-checkbox>