考虑以下：
class MyElem extends HTMLElement {};
customElements.define('my-element', MyElem);
class MyMoreSpecificElem extends MyElem {};
customElements.define('my-more-specific-element', MyMoreSpecificElem);
在对象继承的说法中，第二个类的实例与第一个类具有“is-a”关系： aMyMoreSpecificElem 是 a MyElem。
这种关系在 JavaScript 中被捕获：
let subclassInstance = document.querySelector('my-more-specific-element');
let parentClass = document.querySelector('my-element').constructor;
subclassInstance instanceof parentClass; // true
但是我想不出任何MyElem使用 CSS 选择器选择所有s（包括子类 MyMoreSpecificElem）的方法。标签选择器只会获得超类或子类，我知道的所有关系描述选择器（例如~、>）都是关于文档中的位置，而不是类层次结构。
我的意思是，当然，我可以在构造函数中添加一个 CSS 类并通过它进行选择，调用super将确保甚至可以以这种方式选择子类实例。但这很粗糙。有没有办法在纯 CSS 中做到这一点？
我正在尝试构建一个将由 Angular 应用程序使用的自定义元素。自定义元素将接受一个道具并可能对其进行操作。
我的理解是，我可以使用“盒子里的香蕉”来处理这种绑定，也就是<custom-element [(foo)]="bar">转换为<custom-element [foo]="bar" (fooChange)="bar = newBar">，等等。
我的角度模板：
<an-el [(clicked)]="isClicked"></an-el>
<p>Did you click a button? {{ isClicked }}</p>
我的自定义元素调度一个事件：
this.dispatchEvent(new CustomEvent('clickedChange', { bubbles: true, detail: true }));
但它似乎将整个 CustomEvent 绑定到isClicked：
Did you click a button? [object CustomEvent]
我究竟做错了什么？
这是我的应用程序（在 Chrome 中运行）：https : //stackblitz.com/edit/angular-nlguf4
是否可以使用从不同脚本生成的Angular 元素？
我有 2 个项目天气小部件和时钟小部件，它们生成自己的脚本（连接所有必需的脚本）。
当我单独使用这些小部件时，它工作正常，但是当它们在同一页面上使用时，会出现如下所示的错误：
DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at CustomElementRegistry.define (http://172.27.147.64:8080/node_modules/document-register-element/build/document-register-element.js:2:18538)
at new AppModule (http://172.27.147.64:8080/dist/weather-widget/main.js:115:24)
我创建了一个 Web 组件，并从我的资产文件夹中引用了图像
如下
<img src="./assets/bot.png" alt="{{botTitle}}" />
在本地一切都很好，我将自定义元素发布到了 firebase 主机，并且 javascript、css 和资产文件夹已经存在于我的主机上。
然后我尝试在另一个 html peage 中使用我的 web 组件，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TMIBot</title>
<base href="/">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, user-scalable=no">
<title>Test Angular Elements</title>
<link rel="stylesheet" href="https://myproject.firebaseapp.com/dist/dlx-styles-1.0.css">
</head>
<body>
<dlx-chat></dlx-chat>
<script type="text/javascript" src="https://myproject.firebaseapp.com/dist/dlx-chatbot-1.0.js"></script>
</body>
</html>
并通过本地 http 服务器（http-server）提供服务
问题是正在加载的图像./assets/bot.png在托管网站中不存在，而它们存在于我在 firebase 中发布的网站上。
我知道我可以通过完整的 url 来引用它们，但我也认为有一个明显的解决方案，但我错过了。
我感谢帮助
我有一个<my-el>结构与此类似的自定义元素（纯静态的、服务器呈现的 HTML）：
<my-el>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</my-el>
由于 Chrome 不保证connectedCallback自定义元素的子元素可用性，我使用HTMLParsedElement它基本上使用以下步骤延迟自定义元素初始化：
nextSibling（在这种情况下解析器可能已经通过my-el），或者是否DOMContentLoaded已经到达（又名document.readyState !== 'loading'）。MutationObserver就childList重新检查以上条件。概述的策略目前仍然存在的问题是，MutationObserver当这是可用的 HTML 时，可能会被触发：
<my-el>
<div>a</div>
<div>b</div>
</my-el>
甚至这个
<my-el>
<div>a</div>
</my-el>
在这些情况下， MutationObserver 会被多次触发，并且处理程序无法知道</my-el>实际何时到达结束。
问题：有谁知道div像这样包装所有内部元素是否可以解决这个问题：
<my-el>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
</my-el>
或者换句话说，当变异观察者为这个结构触发时，我能否可靠地假设包装子 div 完全可用，包括它的所有后代节点？
javascript dom mutation-observers custom-element native-web-component
大家好，我是 javaScript 的初学者，目前正在探索 JS Web 组件，但由于某些用例而陷入困境
1）我想将一个 JS 对象传递到我的组件中，例如
<my-component data=obj ></my-component>
并要求在我的组件代码中使用
connectedCallback () {
console.log(this.data) // it should print {"name":"xyz" , "role" : "dev"}
}
2）我还需要传递一些函数或者回调函数，比如。
function myFunction(e){
console.log(e)
}
<my-component click=myFunction ></my-component>
请尝试在 ans 中添加代码片段，这将有助于我学习更多 JS。谢谢
我有一个按预期工作的自定义 HTMLElement，但我找不到将参数传递给构造函数的方法；相反，我正在访问在我的自定义标记中传递值，但随后我必须在 中设置值connectedCallback()，我对此并不满意。
这是我现在正在做的基本版本：
class TrackingPreview extends HTMLElement {
constructor() {
super();
const video = document.createElement('video');
video.setAttribute('controls', '');
video.setAttribute('width', '1920');
video.setAttribute('height', '1080');
shadow.appendChild(video);
this.video = video;
}
connectedCallback() {
const videoId = this.getAttribute('video-id');
this.video.id = videoId;
}
}
我宁愿将 videoId 直接传递给构造函数，就像这样（不起作用）：
JS：
class TrackingPreview extends HTMLElement {
constructor(videoId) {
super();
const video = document.createElement('video');
video.setAttribute('id', videoId);
video.setAttribute('controls', '');
video.setAttribute('width', '1920');
video.setAttribute('height', '1080');
shadow.appendChild(video);
}
connectedCallback() {
}
}
HTML 页面上的 JS 脚本：
$(document).ready(function(){
const tracking_preview = document.createElement('tracking-preview','{{video_id}}');
tracking_preview.videoId …考虑这个template带有两个 flatx-element和一个嵌套的HTML 。
<template id="fooTemplate">
<x-element>Enter your text node here.</x-element>
<x-element>
<x-element>Hello, World?</x-element>
</x-element>
</template>
如何初始化（触发构造函数）从fooTemplate文档片段克隆的所有自定义元素而不将其附加到 DOM，也不是通过使用is="x-element";扩展内置元素；要么是整个片段。
class XElement extends HTMLElement {
constructor() { super(); }
foo() { console.log( this ); }
} customElements.define( 'x-element', XElement );
const uselessf = function( temp ) {
const frag = window[ temp ].content.cloneNode( true );
/* Your magic code goes here:
*/ do_black_magic( frag );
for (const e of frag.querySelectorAll('x-element') )
e.foo(); // This should …html javascript documentfragment custom-element html-templates
我有一个自定义 HTML 标签<fancy-foo>，我想扩展其功能。一些<fancy-foo>元素将使用pretty-bar自定义元素进行扩展，以便我可以在我的 HTML 中使用它们作为
<fancy-foo is="pretty-bar">
<!-- content -->
</fancy-foo>
所以，我定义类FancyFoo和PrettyBar，定义fancy-foo元素并使用扩展它pretty-bar，像这样：
class FancyFoo extends HTMLElement {
constructor() {
super();
}
}
class PrettyBar extends FancyFoo {
constructor() {
super();
}
}
window.customElements.define('fancy-foo', FancyFoo);
window.customElements.define('pretty-bar', PrettyBar, {extends: 'fancy-foo'});
可悲的是，谷歌浏览器吐出错误
未捕获的 DOMException：无法在“CustomElementRegistry”上执行“define”：“fancy-foo”是有效的自定义元素名称
这是一个奇怪的错误。奇怪的是，它说“fancy-foo”是一个有效的自定义元素名称；我知道，但为什么会抛出错误？
这里发生了什么？
custom-element ×10
javascript ×6
angular ×3
html ×3
angular6 ×1
css ×1
django ×1
dom ×1
html-heading ×1
shadow-dom ×1
subclassing ×1