点燃元素-导入另一个组件中的组件，然后访问导入组件的DOM。

Question

我在这件事上花了几天的心思。一般来说，我对、发光元素和web组件都很熟悉。

基本上，我正在构建一个名为<date-picker>的新组件，它使用的是Flatpickr插件。此日期选择器组件导入另一个名为<textfield>的组件。在该组件的内部有一个包装器(..date wrapper)，它有一个输入字段和一个图标。我需要能够访问包装，以便我可以点击输入字段和图标，以触发日历弹出。但是，无论我做什么，我都无法访问组件中的dom元素。我尝试过使用this.shadowRoot.querySelector('.date-picker')和light 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>是一个自定义元素，那么它的标签名是非法的:定制元素标记必须包含，至少是一个-。这可能是阻止浏览器升级它(从而呈现其内容和执行其逻辑)。

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

你能做的是：

• 使用级联querySelectors 类DatePicker扩展了LitElement {异步firstUpdated() { const textField =this.renderRoot.querySelector(‘文本-字段’)；等待textField.updated；//等待文本字段的第一个呈现，const datePicker =this.renderRoot.querySelector}}
• 如果可能，在.date-picker的模板中移动<date-picker>
• 将.date-picker传递给<text-field>，后者在插槽中呈现它 //通过这种方式您可以直接选择..date选择符呈现(){返回html<text-field> <div class="date-picker"></div> </text-field>；}
• 在<text-field>中实例化选择器，并使用属性(或其功能的一部分，通过方法和属性)公开实例。

(如果可能的话，我会避免第一个选择)