javascript - 在 web 组件中引用 light DOM

Question

我正在使用 skate.js 并尝试引用网络组件的轻型 DOM 进行验证和操作。该组件如下所示:

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

我正在尝试引用该复选框以验证它是否存在并向其添加一个 id，以便影子 DOM 标签可以通过 for 属性引用它。但是，我不知道如何在呈现组件后引用它。

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

在 Web 组件中引用 Light DOM 的最佳方式是什么？

Answer 1

由于 light DOM 只是普通 DOM，您可以像往常一样引用其中的元素:

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

如果您的示例不起作用，可能是因为未以正确的方式或在正确的时间调用方法 renderedCallback()。

下面是一个在“vanilla”javascript 中运行的例子(抱歉我不了解 SkateJS)

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>