我使用带有两个自定义元素(v1)的Web组件做了一个简单的例子,其中一个嵌套在另一个元素中.index.html的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="app-container.html">
</head>
<body>
<app-container></app-container>
</body>
</html>
APP-container.html:
<link rel="import" href="toolbar.html">
<template id="app-container">
<app-toolbar></app-toolbar>
</template>
<script>
customElements.define('app-container', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
shadowRoot.appendChild(content.cloneNode(true));
}
});
</script>
toolbar.html:
<template id="app-toolbar">
<p>Ok!</p>
</template>
<script>
customElements.define('app-toolbar', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; …javascript web-component shadow-dom html5-template html-imports
我想将 Lit-Element 与 Bootstrap 结合使用。
目前，我只是按照此处的建议导入了外部依赖项： https: //lit-element.polymer-project.org/guide/styles#external-stylesheet
有没有更好的方法来导入这些第三方依赖项？
这是我的组件：
import { LitElement, html, css } from "../../../third-party-libs/lit-element.js"
class LoginError extends LitElement {
static get properties() {
return {
show: { type: Boolean, reflect: true }
}
}
static get styles() {
return css`
div {
color: red;
}
.hide-me {
visibility: hidden
}
`;
}
constructor() {
super();
this.show = false
}
render(){
return html`
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<!-- jQuery first, then Popper.js, then …我想测试一些自定义 Web 组件并使用 jest.js 作为测试运行程序（由于它支持 ES6）。
Chromium 支持类似的命令
window.customElements.define('my-custom-element', MyCustomElementClass);
注册自定义 Web 组件。
但是，window.customElements在玩笑测试的上下文中似乎并不知道。
作为一种解决方法，我尝试将jest 与 puppeteer 和 express 结合使用，以customElements在 Chromium 中运行该部分。
但是，我很难TreezElement在评估的代码中注入自定义元素类：
treezElement.js：
class TreezElement extends HTMLElement {
connectedCallback () {
this.innerHTML = 'Hello, World!';
}
}
treezElement.test.js：
import TreezElement from '../../src/components/treezElement.js';
import puppeteer from 'puppeteer';
import express from 'express';
describe('Construction', ()=>{
let port = 3000;
let browser;
let page;
let element;
const width = 800;
const height = 800;
beforeAll(async …我正在尝试在 svelte 3 中创建自定义元素（Web 组件）。我找不到任何方法来从 css 设置嵌套组件的样式。Svelte 在将样式注入到<style>ShadowDOM 内部之前删除它们。
问题是我想在我的根元素中嵌套组件。例如：
如此处所述：svelte-custom-element
导入到 custom-element 的所有组件都必须将编译器选项设置为<svelte:options tag="component-name" />.
使用此选项设置嵌套组件按预期工作并注入根元素 ShadowDOM。问题是styles在嵌套组件中定义的没有被注入。此问题的解决方法是将它们<style>作为 ShadowDom 中的全局样式注入到 root 的元素中。（不）幸运的是，当自定义元素尚不存在时，svelte 会在编译期间自动删除所有未使用的样式。
我的目标是使用 svelte 创建 web 组件，然后在 svelte 之外将其用作本机 web 组件。
这是REPL
正如Condutry所写的那样，自定义元素在 REPL 上并不真正起作用：
REPL 中的编译器选项实际上并不影响运行的代码，只是影响显示的代码。因此，启用 customElement > 并不意味着您正在构建和运行 Web 组件
所以它更像是一个代码示例而不是一个工作示例。
从<div class="nested">开始从 Nested.svelte 导入的嵌套组件。
<style>元素应该.nested注入类，但它被 svelte 编译器删除。
web-component shadow-dom custom-element svelte svelte-component
我正在使用带有 Flow 类型的 React useRef，并且我正在尝试为第三方 Web 组件库编写一个包装器组件。
Web 组件需要一个 changeCallback 函数，我正在使用 ref 将其分配给 ref。
function RadioButtonGroup({ onChange, children }) {
const ref: { current: null | ElementRef<ElementType> = React.useRef(null);
React.useEffect(() => {
if (ref.current) ref.current.changeCallback = onChange;
}, [onChange]);
return <web-component ref={ref}>{children}</web-component>
}
由于 HTMLElement 不包含名为 changeCallback 的属性，因此流程会引发错误。
无法分配给
handleChange，ref.current.changeCallback因为属性changeCallback缺失HTMLElement
我尝试使用这样的属性扩展“ElementType”
ElementRef<ElementType & { changeCallback: Function }>
但这会导致以下错误：
无法实例化，
ElementRef因为对象类型 [1] 不是 React 组件。
Web 组件不会在更改时触发“更改”事件。它执行函数changeCallback。这是库的文档。
// MyComponent.js
class MyComponent extends Component { …我正在使用聚合物 3 和 lit-element(2.2.1)。mwc-textfield 的版本是 0.13.0。我已经阅读了与此版本相关的文档。在此文档中，我发现我们可以为高度添加 mixin。我尝试了几种方法，但没有成功。可能是我使用的语法错误。我想降低文本字段的高度。这是我的文本字段
<mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield>
和我的 css
#textBox{
text-transform: none;
--mdc-theme-primary: transparent;
--mdc-text-field-fill-color: #fff;
--mdc-text-field-hover-line-color: #f5f5f5;
--mwc-text-width: 100%;
width:100%;
}
应用的默认 css 是
:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) {
background-color: transparent;
}
.mdc-text-field:not(.mdc-text-field--disabled) {
background-color: rgb(245, 245, 245);
}
.mdc-text-field {
display: flex;
width: 100%;
}
.mdc-text-field {
height: 56px;
display: inline-flex;
position: relative;
box-sizing: border-box;
will-change: opacity, transform, color;
border-radius: 4px 4px 0px 0px;
overflow: hidden;
}
.mdc-text-field {
--mdc-ripple-fg-size: 0; …我想将 Web 组件集成到我的 React 应用程序中。它们定义了一组封闭的 React 应用程序必须监听的自定义事件。
根据反应文档：
Web 组件发出的事件可能无法通过 React 渲染树正确传播。您需要手动附加事件处理程序来处理 React 组件中的这些事件。
我一直在努力完成这项工作。我可以从 react 组件分派自定义事件并在 dom 元素上监听它们。但是我无法在其他 React 组件上捕获这些事件。
我如何从 React 应用程序中正确地监听自定义事件（理想情况下，还能够发送它们）？
最小的例子：
我已经设置了一个最小的示例（在 sandbox.io 上实时编辑）。它由两个 div 组成，外面的一个监听我的自定义事件，里面的一个托管虚拟 dom。在虚拟 dom 中有两个组件。外层监听自定义事件，内层调度它。运行时，外部 div 注册自定义事件。在反应应用程序内部，它没有被捕获。
如果您想使用代码，我已将其设置为 repo：
git clone https://github.com/lhk/react_custom_events
cd react_custom_events
npm i
npm run start
# browser opens, look at the console output
index.html, 包含一个 div ，它将监听自定义 dom 元素，其中包含 react 应用程序的根。
<div id='listener'>
<div id="react_root"></div>
</div>
React 应用程序由两个功能组件组成：侦听器和调度器。index.tsx呈现 react 应用程序并在 …
我试图从网络组件中引发事件，但确实如此。
<my-component id="xyz" bez="hallo" hello="myScript()"></my-component>
<script>
xyz.addEventListener("hello", function(event) {
console.log(event.detail.name);
});
</script>
html 标签“hello”和事件监听器都不会引发该事件。
Web 组件如下所示：
var button=document.createElement("button");
button.innerHTML=cap;
button.addEventListener('click', () => {
console.log("click");
button.dispatchEvent(new CustomEvent("hello", {
detail: { name: "John" }
}));
});
shadow.appendChild(button);
谁能帮我找出错误吗？多谢。
代码小提琴：https: //jsfiddle.net/b43uqsLp/2/
我正在使用 Vue.js 和vue-custom-element为网站制作一个可嵌入的小部件。一切都很顺利，直到我遇到了问题。
当我尝试使用包中的组件（带有 css）时。例如vue-number-input。css 被注入到网页的头部，即使它应该添加到影子根中。
正如您在这里所看到的，您会看到数字输入包中的 css 被注入到 head 内部，而其他样式则像它们应该的那样位于影子根中。
据我所知，我更改了使应用程序在影子根中工作所需的所有设置。
这是我vue.config.js的main.js（我在其中注册自定义元素）和我的组件（我在其中从包导入组件）。
有谁知道我该怎么做或者这是否可能？
我正在尝试使用 vanilla javascript 构建一个自定义组件，该组件观察所有数据属性的变化，例如：
class MyComponent extends HTMLElement {
static get observedAttributes () {
return ["data-one","data-two","data-three",so forth...]
}
}
理论上，可以为该组件分配任意数量的数据属性，因此无法准确预测会有多少个数据属性，但每次分配新的数据属性时，我都需要该组件执行一些操作，有什么办法去做吧？必须将每个属性的具体名称放入“observedAttributes”返回的数组中似乎确实具有限制性
作为奖励，有没有什么方法可以观察没有特定名称但遵循特定模式的属性？（例如，它们与正则表达式字符串或类似的东西匹配）
作为额外的奖励，有没有办法观察所有属性？（我知道由于性能因素，他们使这不是默认行为，但如果需要的话，能够启用它仍然是件好事）
web-component ×10
javascript ×5
shadow-dom ×3
lit-element ×2
reactjs ×2
arrays ×1
bootstrap-4 ×1
dom-events ×1
events ×1
flowtype ×1
html ×1
html-imports ×1
jestjs ×1
lit-html ×1
polymer-3.x ×1
puppeteer ×1
react-hooks ×1
svelte ×1
unit-testing ×1
vue.js ×1
webpack ×1