在 connectedCallback（Web 组件）中使用 JQuery 访问子元素

Question

我有一个非常简单的 Web 组件，如下所示，它从服务器加载组件模板文件：

export default class EditorComponent extends HTMLElement {
    async connectedCallback() {
        let file = "http://blog/components/editor/editor.html";
        let res = await fetch( file );
        this.attachShadow( { mode: 'open' } ).innerHTML = await res.text();
    }
}

customElements.define('editor-component', EditorComponent);

我需要通过 jQuery 访问组件 HTML 文件中的子元素。我尝试了以下但无济于事：

async connectedCallback() {
    let file = "http://blog/components/editor/editor.html";
    let res = await fetch( file );
    this.attachShadow( { mode: 'open' } ).innerHTML = await res.text();
    $(this).find('div').hide(); <<<<< WHAT I AM ATTEMPTING
}

我也添加了超时，但这也没有帮助。

这可以做到吗？

Answer 1

您必须自己执行 jQuery 语法

我在这里做的是普通的标准 JS 选择器
因为我在 IE9 发布时忘记了 jQuery 选择器（需要 80KB+ 的库）... 2011 年

加载HTML有点生硬，显示在shadowDOM中，
然后只提取你想要的内容。请参阅下面的 h1

标准 DOMParser() 可以分担工作，更快，因为没有 HTML Rendered,
见 alink 于：

<web-component></web-component>

  <script>
    customElements.define("web-component", class extends HTMLElement {
      async connectedCallback() {
        let file = "https://load-file.github.io/";
        let html = await (await fetch(file)).text();

        // Browser engine parses HTML to visual (shadow)DOM
        this.attachShadow({mode: 'open'}).innerHTML = html;
        let h1 = this.shadowRoot.querySelector("h1");

        // Browser engine parses HTML in Memory
        let doc = new DOMParser().parseFromString(html, "text/html");
        let alink = doc.querySelector("h2 a");
        alink.target = "blank" ;

        this.shadowRoot.replaceChildren(h1, "SHIFT+Click this link: ",  alink);
      }
    })
  </script>

阅读以下所有方法：

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

在 connectedCallback（Web 组件）中使用 JQuery 访问子元素

Accessing child element with JQuery in connectedCallback (Web Compoenent)

javascript

jquery

web-component