Lit-element - 在另一个组件中导入一个组件，然后访问导入组件的 DOM

Question

老实说，我已经为此绞尽脑汁了几天。我对 lit-element 和一般的 Web 组件非常陌生。

基本上，我正在构建一个名为 <date-picker> 的新组件，它使用 Flatpickr 插件。此日期选择器组件导入另一个名为 <textfield> 的组件。该组件内部有一个带有输入字段和图标的包装器（.date-picker）。我需要能够访问包装器，以便可以单击输入字段和图标来触发日历弹出窗口。但是无论我做什么，我都无法访问组件内的那些 dom 元素。我尝试使用 this.shadowRoot.querySelector('.date-picker') 以及 light dom document.querySelector('.date-picker') 以及其他各种方式访问​​它们。下面的示例代码。感谢您提供的任何见解。

日期选择器组件：

render() {
  return html`
    <textfield iconalt="Calendar" iconname="calendar" label="Calendar" optionaltext="hide"></textfield>
  `;
}

updated() {
  var datePickerShadow = this.shadowRoot.querySelector('.date-picker'); // gets el in shadow dom
  var datePickerLight = document.querySelector('.date-picker'); // gets el in light dom

  var importantDate = [Date.parse('2021-1-27'), Date.parse('2021-1-5'), Date.parse('2021-2-9')];
    var datePicker = flatpickr(datePickerLight, {
        wrap: true,
        disable: ["2021-01-30", "2021-01-21", "2021-01-08", new Date(2025, 4, 9) ],
        allowInput: true,
        clickOpens: false,
    })
}

Answer 1

如果<textfield> 是自定义元素，则其标记名是非法的：自定义元素标记must contain 至少有一个-。这可能会阻止浏览器 upgrading 它（从而呈现其内容并执行其逻辑）。

无论如何，如果.date-picker 在<textfield> 的模板内，那么您尝试的querySelector 调用都不起作用：第一个选择在<date-picker> 的影子dom 内，但不会在子组件中递归，而第二个完全错过了影子领域。

你可以做的是：

• 使用级联查询选择器

  class DatePicker extends LitElement {
  
    async firstUpdated() {
      const textField = this.renderRoot.querySelector('text-field');
      await textField.updated; // Wait for first render of text-field
      const datePicker = textField.renderRoot.querySelector('.date-picker');
    }
  
  }
  

• 如果可能，将.date-picker 移动到<date-picker> 的模板中

• 将.date-picker 传递给<text-field>，这会将其呈现为slot

  // This way you can directly select .date-picker
  
  render() {
    return html`
      <text-field>
        <div class="date-picker"></div>
      </text-field>
    `;
  }
  

• 在<text-field> 中实例化选择器并使用属性（或通过方法和属性的部分功能）公开实例。

（如果可能，我会避免第一个选项）