为了让 Web 组件相互通信，我使用了自定义事件。让我们想象一下以下情况：
WebComponentA 使用或包含 WebComponentB，如果单击按钮，WebComponentB 会发送 CustomEvent（bubbles：true，composed：true）。如果 WebComponentB 发送此事件，WebComponentA 想要执行某些操作。
我应该如何在 WebComponentB 中调度事件？
window.dispatchEvent(customEvent);
或者
this.shadowRoot.dispatchEvent(customEvent);
我应该如何捕获 WebComponentA 中的事件？
window.addEventListener(custom-event, () => {
);
或者
this.shadowRoot.addEventListener(custom-event, () => {
);
我应该考虑使用其中一种或另一种是否有任何负面影响？
谢谢你！
javascript dom web-component custom-events native-web-component
是否可以选择开槽元素中的后代元素？
像这样的例子：
::slotted(div p) {
color: blue;
}
<div><p>test</p><div>
这不起作用
使用自定义元素，我想对自定义元素内的元素进行样式设置，但是当我定义该元素时，除了影子 dom 之外的所有内容都会消失。
如何将内容从元素移动到 Shadow dom？我已经<div class="wrapper">在阴影内有一个包装元素 ( )，但尝试使用
wrapper.innerHTML = this.innerHTML;
不起作用。
超文本标记语言
<site-card>
<section title>
...
</section>
<section body>
...
</section>
<section actions>
<button class="modern small">Action</button>
<button class="modern small">Action 2</button>
</section>
</site-card>
JS
"use strict";
class cardElement extends HTMLElement {
constructor() {
super();
var shadow = this.attachShadow({mode: 'open'});
var wrapper = document.createElement('div');
wrapper.setAttribute('class','wrapper');
wrapper.innerHTML = this.innerHTML;
var style = document.createElement('style');
style.textContent = ... /* CSS removed to shorten. */
shadow.appendChild(style);
shadow.appendChild(wrapper);
};
};
customElements.define('site-card', cardElement);
slot制作一个可重用的 Web 组件固然很好，但到目前为止它还是有限制的。我面临的是风格问题。即使您知道注入内容的结构是什么，您也无法在组件内定义样式。
详细信息可以从我在 github 上的帖子中找到
我编写了一个组件，并尝试slot从外部注入内容，并尝试将样式添加到组件影子根中的特定内容。
演示
HTML 文件
<my-navbar>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</my-navbar>
JS文件
customElements.define('my-navbar', class extends HTMLElement {
constructor () {
super();
const sr = this.attachShadow({ mode: 'open' });
sr.innerHTML = `
<style>
/*worked*/
::slotted(ul)
{
color:green;
}
/*
Suppose I know the outside content is "ul li", and I directly define the
style after they injected into component's slot. However, it just doesn't
work because the slotted selector is just …我正在尝试为我的UI项目之一使用本机Web组件，并且对于此项目，我没有使用任何框架或库（例如Polymer等）。我想知道在两者之间有什么最佳的交流方式或其他方式像我们在angularjs / angular中所做的那样的Web组件（例如消息总线概念）。
当前，在UI Web组件中，我正在使用dispatchevent发布数据和接收数据，正在使用addeventlistener。例如，有2个Web组件，ChatForm和ChatHistory。
// chatform webcomponent on submit text, publish chattext data
this.dispatchEvent(new CustomEvent('chatText', {detail: chattext}));
// chathistory webcomponent, receive chattext data and append it to chat list
this.chatFormEle.addEventListener('chatText', (v) => {console.log(v.detail);});
请让我知道实现此目的的其他方法。任何可以轻松与本机UI Web组件集成的优秀库，如postaljs等。
html javascript web-component custom-element native-web-component
我想开始利用现在所有主要 Web 浏览器都支持的http://webcomponents.me W3C 标准。
我研究了互联网，到目前为止我发现了以下框架：
模板 - 由离子创建。所有离子组件都使用这个框架/编译器来构建原生支持的 Web 组件。
lit-element - 由 Google 创建，是 Polymer 框架的一部分。
SkateJS - 不知道这背后的原因，但它位于前 3 名流行的 Web 组件框架中。
有人可以给我建议或意见哪个框架最好吗？
javascript web-component stenciljs native-web-component lit-element
我正在制作一个 Web 组件，它将显示“Hello {name}!” 从哪里来。{name} name="foo"当我尝试它时，我没有收到任何错误，但它只显示“Hello null！”。
索引.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./script.js"></script>
</head>
<body>
<hello-world name="Joe"></hello-world>
</body>
</html>
脚本.js：
class HelloWorld extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
const p = document.createElement('p');
p.innerHTML = `Hello ${this.getAttribute('name')}!`;
this.shadowRoot.append(p);
}
}
customElements.define('hello-world', HelloWorld);
在任何情况下，我们假设name总是有一个输入。
html javascript web-component custom-element native-web-component
我试图使用选择器设置width和height在WebComponent中:host,但大小不会改变.以下是组件的模板:
<template>
<style>
:host {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
<h1>Content</h1>
</template>
我需要做的是添加div一个容器并设置它的大小
<template>
<style>
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
}
</style>
<div>
<h1>Content</h1>
</div>
</template>
我想明白为什么这是不可能的以及它的原因.或者,如果有更好的方法来解决这个问题.
这是它的一个JSBin:http://jsbin.com/gesovagapi/edit？html,css,js,output
只有一些 HTMLElements 支持约束验证 api（例如，HTMLButtonElement）。我想创建一个自定义的 web 组件，它也支持约束验证 api。
下面给出了所需结果的示例：
<form>
<input name="title" required>
<custom-form-component></custom-form-component>
</form>
<script>
const form = document.querySelector('form');
form.checkValidity();
</script>
的custom-form-component可以调用setCustomValidity其自身上（基于相应用户输入上下文）和验证本身真或假。因此，form.checkValidity()对于 的结果，对 的调用应该返回真或假custom-form-component。
正如我从文档中发现的（例如在 MDN 上），仅对于某些元素，可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。
具体问题：如何实现支持约束验证api的自定义Web组件？
web-component shadow-dom native-web-component constraint-validation
对于这个问题我还没有看到满意的答案。这基本上是这个问题的重复，但它关闭不当并且给出的答案不充分。
我提出了自己的解决方案，我将在下面发布。
这对于网页抓取很有用，或者在我的例子中，在处理自定义元素的 javascript 库上运行测试。我确保它生成我想要的输出，然后使用此函数来抓取给定测试输出的 HTML，并使用复制的 HTML 作为预期输出，以便将来与测试进行比较。
javascript web-scraping shadow-dom custom-element native-web-component