如何 select 从特定 javascript class 继承的所有自定义元素

Question

现在我正在尝试 webComponent 的乐趣。我创建了一个组件，它应该代表我所有其他可翻译组件的母亲 class。它现在按我想要的方式工作，但我想要一种方法来 select 从这个母亲 class 继承的当前文档的所有元素。类似于：

document.getElementsByTagName('lsp-motherComposant');

无效。

index.html

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>WebComponentTest</title>
        <!-- motherComponent -->
        <link rel="import" href="components/lsp-translatable/lsp- 
        translatable.html" />
        <!-- child Component -->
        <link rel="import" href="components/lsp-button/lsp-button.html" />
    </head>

    <body>
        <select id="lang">
            <option value="fr" selected>fr</option>
            <option value="en">en</option>
            <option value="zh">zh</option>
        </select>

        <lsp-button i18n="events" width="33%" gradient color1="0,0,0,0" 
        color2="128,0,128,1" direction="left"></lsp-button>

        <script type="text/javascript">
             window.onload = function(){
             document.getElementsByTagName('lsp-translatable');
             // => empty node list

             };
         </script>
    </body>

    </html>

lsp-translatable.js:

class LspTranslatable extends HTMLElement {//some stuff}
customElements.define('lsp-translatable', LspTranslatable);

lsp-button.js:

class LspButton extends LspTranslatable {//some stuff}
customElements.define('lsp-button', LspButton);

Answer 1

你试过了吗document.querySelectorAll？

const components = document.querySelectorAll('lsp-button');
console.log(components);
console.log(Array.from(components));

lsp-button {
  position: static;
  display: block;
  border: 1px solid #6F6;
  height: 1rem;
  width: 1rem;
}

<lsp-button id="button-0"></lsp-button>
<lsp-button id="button-1"></lsp-button>
<lsp-button id="button-2"></lsp-button>
<lsp-button id="button-3"></lsp-button>
<lsp-button id="button-4"></lsp-button>
<lsp-button id="button-5"></lsp-button>
<lsp-button id="button-6"></lsp-button>
<lsp-button id="button-7"></lsp-button>
<lsp-button id="button-8"></lsp-button>
<lsp-button id="button-9"></lsp-button>

Answer 2

getElementsByTagName 适合我

如果要查找特定属性，例如 document.querySelectorAll('img[title]')（所有具有标题属性的图像），您可以使用 document.querySelectorAll

console.log( Array.from(document.getElementsByTagName('randomComponent')) );

randomComponent {
  position: static;
  display: block;
  border: 1px solid #6F6;
  height: 1rem;
  width: 1rem;
}

<randomComponent id="1"></randomComponent>
<randomComponent id="2"></randomComponent>

Answer 3

为了确保您 select 通过具有 querySelector() 属性的所有自定义元素确实继承自特定 Javascript class，您应该测试每个元素instanceof.

window.onload = function() {
    const els = document.querySelectorAll( '[i18n]' ) 
    const translatableNodes = Array.from(els).filter( el => el instanceof LspTranslatable )
}

Answer 4

这对生产代码没有帮助，但它是您正在寻找的开发版本。

Chrome DevTools 有一个开发者命令 queryObjects，它将 return class 的所有实例。在 Chrome DevTools 中，您可以运行以下内容：

queryObjects(LspTranslatable);

如何 select 从特定 javascript class 继承的所有自定义元素

How to select all custom element that inherit from a specific javascript class

javascript

web-component