我有一个自定义元素，其创建方式如下：
connectedCallback()
{
var on_off_switch = document.createElement('Div');
on_off_switch.class = 'switch demo3';
this.appendChild(on_off_switch);
}
但我在查看源代码时注意到on_off_switch's class 未设置为switch demo3。
所有其他作业都有效，例如on_off_switch.style['background-color'] = 'red'等等。
是否可以设置class附加在自定义元素内的元素的 CSS？
我使用 Angular Elements 创建了两个自定义元素。
<capp-customtag1> is defined in customtag1.js
<capp-customtag2> is defined in customtag2.js.
I load <capp-customtag1> with <script type="text/javascript" src="assets/customtag1.js"></script>.
Similarly, for <capp-customtag2>
分别地，它们按预期工作。但是，如果我尝试在同一个项目（一个 Angular 6 项目）中使用它们，当我尝试加载第二个脚本时，我会收到以下错误：
错误 DOMException：无法在“CustomElementRegistry”上执行“define”：此名称已与此注册表一起使用。
对 CustomElementRegistry 的调用是在 customtag1.js 和 customtag2.js 中进行的。
这是我用来在 Angular Element AppModule 构造函数中创建 capp-customtag1 的代码：
const el = createCustomElement(CustomTag1Component, {injector: this.injector});
customElements.define('capp-customtag1', el);
这是在第二个项目的 AppModule 构造函数中创建 capp-customtag2 的代码：
const el = createCustomElement(CustomTag2Component, {injector: this.injector});
customElements.define('capp-customtag2', el);
为什么两个元素具有相同的自定义元素名称？而且，我该如何解决这个问题。
谢谢你。
我需要找到一种非常高效的方法来确定自定义元素或其任何父元素是否具有 display: none;
第一种方法：
checkVisible() {
let parentNodes = [];
let el = this;
while (!!(el = el.parentNode)) {
parentNodes.push(el);
}
return [this, ...parentNodes].some(el => el.style.display === 'none')
}
有什么比这运行得更快的吗？这甚至是一种安全的方法吗？
我需要这个的原因：我们有一个<data-table>自定义元素（原生 webcomponent），它在它的connectedCallback(). 我们有一个应用程序，在单个页面中包含 20-30 个自定义元素，这导致 IE 11 需要大约 15 秒才能呈现页面。
我需要延迟那些<data-table>最初甚至不可见的组件的初始化，所以我需要一种方法来测试connectedCallback()元素是否可见（如果它在最初未显示的 18 个选项卡之一中，则不是）。
javascript web-component custom-element native-web-component
根据自定义元素规范，
该元素不得获得任何属性或子元素，因为这违反了使用
createElement或createElementNS方法的消费者的期望。
在这种情况下，Firefox 和 Chrome 都会正确地抛出错误。但是，当附加影子 DOM 时，不会出现错误（在任一浏览器中）。
火狐浏览器：
NotSupportedError：不支持操作
铬合金：
未捕获的 DOMException：无法构造“CustomElement”：结果不得有子级
没有影子 DOM
function createElement(tag, ...children) {
let root;
if (typeof tag === 'symbol') {
root = document.createDocumentFragment();
} else {
root = document.createElement(tag);
}
children.forEach(node => root.appendChild(node));
return root;
}
customElements.define(
'x-foo',
class extends HTMLElement {
constructor() {
super();
this.appendChild(
createElement(
Symbol(),
createElement('div'),
),
);
}
},
);
createElement('x-foo');使用影子 DOM
function createElement(tag, ...children) {
let root;
if (typeof …我在不同的 Angular 元素项目中开发了 2 个自定义元素，当我尝试在单个 html 中使用它们时，出现错误“无法在‘CustomElementRegistry’上执行‘定义’：此名称已与此注册表一起使用”如何关注此链接开发https://medium.freecodecamp.org/how-to-create-angular-6-custom-elements-web-components-c88814dc6e0a
我知道它与加载两次打包在两个自定义元素中的库有关。如何解决这个问题？
谢谢
正如文档所说：
每次将自定义元素附加到文档连接元素时都会触发 connectedCallback
还：
firstUpdated 在您的组件第一次更新和呈现后触发
问题是我无法弄清楚它们之间的区别。那么区别是什么呢？当我应该使用connectedCallback，当firstUpdated生命周期挂钩？
我正在尝试在我的网站中使用一些自定义元素，并且在 Firefox 中到目前为止效果很好。然而，在谷歌浏览器中，它只是默默地失败 - 我的自定义元素的构造函数从未被调用，并且它也不会抛出错误。
假设这个最小的例子：
<!DOCTYPE html>
<html>
<head>
<script>
class MyElement extends HTMLDivElement {
constructor(){
super();
this.style.background = "#00ff00";
console.log("Created custom element!");
}
}
function addCustomElement(){
customElements.define("my-element",MyElement,{extends:"div"});
console.log("Added MyElement to custom element registry!");
}
</script>
</head>
<body onload="addCustomElement()">
<my-element style="display:block;width:100px;height:100px;background:#ff0000"></my-element>
</body>
</html>我希望这会创建一个自定义元素类，并在添加到自定义元素注册表后将 DOM 中的MyElement所有元素转换为该类的实例，从而将最初的红色组件变为绿色。my-element在 Firefox 中，这正是发生的情况，但在 google chrome 中，它保持红色。控制台指示该元素已添加到注册表中，但从未调用其构造函数。
我错过了什么吗？这是chrome的问题，还是我做错了什么？我怎样才能让它在那里工作？
请注意，这是针对 MUI v5 @mui/material 的，而不是使用 v4 @material-ui/core
最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时显示 @mui/material 样式（请参阅这篇文章如何在 React 自定义元素中为 MUI Material v5 的 MUI Material v5 创建插入点以在阴影 dom 中安装样式） ，事实证明，对于包含 @mui/material 组件的 Demo 组件，选择下拉列表的样式不正确。
这是 stackblitz https://stackblitz.com/edit/react-d8xtdu-s2cufr?file=demo.js
import React from 'react';
import Demo from './demo';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { StylesProvider, jssPreset } from '@mui/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { create } from 'jss';
import { render } from 'react-dom'; …我想将我的Vue 2项目从 webpack 迁移到Vite。并且必须使用使用lit-element构建的第三方 Web 组件。
这些组件在运行时抛出错误（通过 vue）：
未知的自定义元素：< foo-component > - 您是否正确注册了该组件？对于递归组件，请确保提供“名称”选项。
还有（通过lit-element）
无法设置“ShadowRoot”上的“adoptedStyleSheets”属性：无法将值转换为“CSSStyleSheet”。
据我所知，那些第三方 Web 组件仅在其索引文件（内部node_modules）中执行此操作：
import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);
所以之前（使用 webpack 设置）我只是导入它们并且一切都可以工作。嗯，实际上 webpacklit-scss-loader也用于这些组件。
我认为 Vite 可能需要一些额外的配置，或者这里可能需要类似于“webpack”加载器的东西，但不确定我必须移动哪个方向。
我做错了什么？
我有一个Custom Element应该有很多 HTML 孩子的。我在课堂上初始化它时遇到了这个问题 constructor ' （结果一定没有孩子）。我明白原因并知道如何解决它。但我现在应该如何围绕它设计我的课程呢？请考虑这段代码：
class MyElement extends HTMLElement {
constructor() {
super();
}
// Due to the problem, these codes that should be in constructor are moved here
connectedCallback() {
// Should have check for first time connection as well but ommited here for brevity
this.innerHTML = `<a></a><div></div>`;
this.a = this.querySelector("a");
this.div = this.querySelector("div");
}
set myText(v) {
this.a.textContent = v;
}
set url(v) {
this.a.href = v;
}
}
customElements.define("my-el", MyElement);
const frag …custom-element ×10
javascript ×5
html ×4
angular ×2
css ×1
lit ×1
lit-element ×1
material-ui ×1
polymer ×1
reactjs ×1
shadow-dom ×1
vite ×1
vue.js ×1