gpt4 book ai didi

javascript - 如何选择从特定 javascript 类继承的所有自定义元素

转载 作者:行者123 更新时间:2023-11-28 14:32:17 26 4
gpt4 key购买 nike

现在我正在尝试玩webComponent 。我创建了一个组件,它应该代表所有其他可翻译组件的母类。它目前按我想要的方式工作,但我想要一种方法来选择从该母类继承的当前文档的所有元素。像这样:

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

最佳答案

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

Chrome DevTools 有一个开发者命令 queryObjects这将返回一个类的所有实例。在 Chrome DevTools 中,您可以运行以下命令:

queryObjects(LspTranslatable);

关于javascript - 如何选择从特定 javascript 类继承的所有自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50992177/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com