Mozilla 表示Web 组件由三种主要技术组成：
根据 ECMAscript 的模板文字，数字 3，“HTML 模板”甚至是必要的吗？
看看我从James Milner那里得到的这个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Component</title>
<script type="text/javascript">
// We define an ES6 class that extends HTMLElement
class CounterElement extends HTMLElement{
constructor() {
super();
// Initialise the counter value
this.counter = 0;
// We attach an open shadow root to the custom element
const shadowRoot= this.attachShadow({mode: 'open'});
// We define some inline styles …javascript web-component template-literals hyperhtml html-templates
我正在使用带有打字稿支持的 vue cli 3。实际上，我正在尝试使用 vuejs 创建 Web 组件。
主文件
import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import wrap from '@vue/web-component-wrapper';
import RoleManagement from './views/role-management/RoleManagement.vue';
const CustomElement = wrap(Vue, RoleManagement);
window.customElements.define('custom-component', CustomElement);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
创建web组件的命令如下，
vue-cli-service build --target wc --name custom-component ./src/main.ts
在出现这个错误后，
找不到模块“@vue/cli-plugin-babel”
我的团队处理多个角度项目。为了代码重用，我们将许多表示组件提取到库中，然后在我们的各种项目中使用它们。
那么，鉴于我们所有的项目都是基于 angular 的，而且我们已经使用了库，我们还能从 angular 元素中获得什么？
我开始研究元素的原因是：
我们的大部分旧项目都使用 Bootstrap 3。我们希望将 Bootstrap 4 与我们制作的新东西一起使用。所以我想知道一个元素是否可以用 Bootstrap 4 设计，并在用 B-3 设计的地方使用它而不会破坏？
那可能吗 ？
我有一个用 Angular 5.2 构建的应用程序。我还从 Angular 8.0 构建了一个 Web 组件。如果我要将该 Web 组件放在静态 html 中，我会这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Button Test Page</title>
<!-- This is the Web Component import -->
<script src="elements.js"></script>
</head>
<body>
<custom-button></custom-button>
</body>
</html>
运行这个 index.html 文件将内置 web 组件。但是，如果我将相同的方法应用于 Angular 应用程序（将它包含在我的 Angular 5.2 应用程序中），它不起作用。
如果我尝试直接从主 index.html 导入，则会出现文件未找到错误。如果我从 angular.json 脚本导入它，我会收到意外的令牌错误。
我到底应该如何将 Angular Web 组件导入现有的 Angular 应用程序？
当我们要使用Shadow Dom创建自定义单选按钮作为 Web 组件时，就会出现问题。
通常，当我们使用单选按钮时，我们通常会为分组的单选框赋予相同的名称，如下所示。
<input type="radio" name="size" id="small" value="small">
<input type="radio" name="size" id="large" value="large">
但是如果我们定义一些自定义元素（比如 cus-radio） -> 我们会以一种方式将名称和 ID 作为输入（来自父元素）并将它们放在自定义元素中。这将完全适用于正常情况。
但我的问题是影子 dom！当我们在 shadow dom 内创建元素时，其中的属性是可访问的或与外部 dom（主 dom）连接。那么，如果它的 name 和 id 属性在父 dom 中不可访问或通用，我们如何开发自定义单选按钮？
例子：-
我们将像这样开发我们的自定义元素（像角度元素中的伪代码）
radio.html:-
<input type="radio" [name]="name" [id]="id" ...>
TS/逻辑文件：-
...
component cus-radio {
@Input() name: string;
@Input() id: string;
...
无论我们在哪里使用它：-
<cus-radio [id]="'small'" [name]="'size'" value="small">
<cus-radio [id]="'large'" [name]="'size'" value="large">
预期的行为应该是（就像在正常 dom 中发生的那样），这两个无线电输入必须相互关联并存在于两个相互理解中，就像一个被检查了另一个必须取消检查等。但在 shadow dom 中它没有。因为那些 name 和 id 在没有引用父 dom（主 dom）的 shadow …
javascript web-component shadow-dom custom-element angular-elements
我想知道是否可以使用不同版本的 Angular 构建的不同角度元素（自定义元素）。我听说 zone.js 正在污染全局范围。
感谢您的回答。
谁能告诉我为什么我不能在 lit-html 的html方法中使用变量？
const h1 = 'h1';
return html`
<${h1} class="a-heading ${classes}">
<slot></slot>
</${h1}>
`;
如果我替换${h1}为h1没有问题的作品。
javascript web-component custom-element lit-element lit-html
是否有任何 Vs Code 扩展可以在 JavaScript 字符串中突出显示 HTML？
具体来说，我正在编写 Web 组件
const html = content => `
<div>
<table>
${content}
</table>
</div>
`;
class BaseTable extends HTMLElement {
constructor() {
super();
}
set content(value) {
const template = document.createElement('template');
template.innerHTML = style + html(value);
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}我想突出显示 html 常量变量中的字符串
查看 React 代码，它似乎更类似于“Lit-Element”代码，两者都可用于创建 Web 组件。如果有人可以解释“React”和“Lit-element”之间的主要区别，这会很有帮助吗？
是否可以自动或以编程方式插入特定类型的嵌套 Web 组件或元素，而无需为其指定slot属性？
考虑这样的结构：
<parent-element>
<child-element>Child 1</child-element>
<child-element>Child 2</child-element>
<p>Content</p>
</parent-element>
有了<parent-element>这样的 Shadow DOM：
<div id="child-elements">
<slot name="child-elements">
<child-element>Default child</child-element>
</slot>
</div>
<div id="content">
<slot></slot>
</div>
预期的结果是：
<parent-element>
<#shadow-root>
<div id="child-elements">
<slot name="child-elements">
<child-element>Child 1</child-element>
<child-element>Child 2</child-element>
</slot>
</div>
<div id="content">
<slot>
<p>Content</p>
</slot>
</div>
</parent-element>
换句话说，我想强制<child-element>s 只允许在<parent-element>类似于<td>元素中只允许在一个<tr>元素中使用。我希望它们被放置在<slot name="child-elements">元素中。必须在slot它们中的每一个上指定一个属性以将它们放置在 的特定插槽中<parent-element>似乎是多余的。同时， 中的其余内容<parent-element>应该自动插入到第二个<slot>元素中。
我首先搜索了一种在注册父元素时定义它的方法，尽管CustomElementRegistry.define()目前仅支持extends作为选项。
然后我想，也许有一个功能允许手动插入元素，即类似的东西childElement.slot('child-elements') …
web-component ×10
javascript ×5
angular ×3
html ×2
lit-element ×2
shadow-dom ×2
babeljs ×1
hyperhtml ×1
lit-html ×1
reactjs ×1
typescript ×1
vue-cli-3 ×1