web-component 相关问题

看起来很奇怪<vaadin-integer-field>＆<vaadin-button>

我以前曾在不同的项目中多次使用过 vaadin WebComponents，但现在我陷入困境，似乎无法弄清楚。请指教。 我正在尝试使用 进行测试 我以前曾在不同的项目中多次使用过 vaadin WebComponents，但现在我陷入困境，似乎无法弄清楚。请指教。 出于测试目的，我尝试使用 <vaadin-integer-field> 和 <vaadin-button> 这就是它们的样子。完全关闭，为什么！？ 实际导入的组件： import { LitElement, html, css } from 'lit'; import { Router } from '@vaadin/router'; class BoxkeyPwaClient extends LitElement { static properties = { header: { type: String }, } static styles = css` :host { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; font-size: calc(10px + 2vmin); color: #1a2b42; max-width: 960px; margin: 0 auto; text-align: center; background-color: var(--boxkey-pwa-client-background-color); } main { flex-grow: 1; } `; constructor() { super(); } firstUpdated() { this.initiateRouter(); } initiateRouter() { const routerOutletElement = this.renderRoot.getElementById('router-outlet') this.router = new Router(routerOutletElement) this.router.setRoutes([ { path: '/', component: 'loading-page', action: async () => { await import('./pages/loading-page') }, animate: false }, { path: '/map', component: 'map-page', action: async () => { await import('./pages/map-page') }, animate: false }, { path: '/test', component: 'test-page', action: async () => { await import('./pages/test-page') }, animate: false } ]); } render() { return html` <div id="router-outlet"></div> `; } } customElements.define('boxkey-pwa-client', BoxkeyPwaClient); 通过路由器插座显示上述组件的组件。 import { LitElement, html, css } from 'lit'; import '@vaadin/integer-field'; class TestPage extends LitElement { static properties = { counter: { type: String }, } static styles = css` :host { } `; constructor() { super(); this.counter = 0; } render() { return html` <vaadin-integer-field value="2" step-buttons-visible min="0" max="9"></vaadin-integer-field> `; } } customElements.define('test-page', TestPage); 应该看起来像这样。 Lit 版本之间似乎存在冲突。 @open-wc 生成器默认安装 Lit 2，而最新的 Vaadin 使用 Lit 3: 更新 package.json 中的 lit 版本解决了我的问题： - "lit": "^2.0.2" + "lit": "^3.1.3"

是否有 HTMX 触发事件等待自定义元素定义？

我正在使用使用自定义元素的鞋带组件库。我想在定义自定义元素时触发 htmx AJAX 请求。尝试使用加载事件，当 cu...

state 和 setState 点亮元素在哪里？

来自react背景，我想知道lit-element中的state和setState等价物在哪里，我在lit-element文档中找不到任何有用的东西。是私有财产吗？或请求更新...

将 Material ui 与 Preact 结合使用

我用 Preact 创建了这个 Web 组件，我正在尝试使用 Material ui 来设置它的样式。阅读 Preacts 文档，https://preactjs.com/about/libraries-addons/，它声称支持

如何避免Web Components中的槽元素在其余元素渲染之前出现？

我的问题是，在渲染 Web 组件的其余部分之前，开槽元素以原始形式出现。想象一下，您有一个 Web 组件，您可以在其中设置几个不同的 HTML 元素的样式，包括...

本机 JS Web 组件的 Blazor 包装器中 CustomEvent 的 null 值

我们正在尝试为我们的本机 Javascript Web 组件库构建 Blazor 包装器。 每当用户更改文本字段的值时，我们的输入都会发出自定义事件 valueChange （即：...

@font-face 未在 ShadowDom 中加载

this.shadowRoot.innerHTML = ` @font-face { 字体系列：SpaceGrotesk； src: url(/fonts/SpaceGrotesk-Medium.ttf); } @font-face { 字体系列：</desc> <question vote="1"> <pre><code> this.shadowRoot.innerHTML = ` &lt;style&gt; @font-face { font-family: SpaceGrotesk; src: url(/fonts/SpaceGrotesk-Medium.ttf); } @font-face { font-family: SpaceGroteskLight; src: url(/fonts/SpaceGrotesk-Light.ttf); } * { box-sizing: border-box; } .tipme { position: relative; font-size: 1.4rem; font-family: SpaceGrotesk, sans-serif; text-align: center; background-color: #fff; padding: 4rem 1.4rem 1.4rem; box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.08); margin: 5rem 1.4rem 1.4rem; width: 50rem; } h1 { font-family: SpaceGroteskLight, sans-serif; font-weight: 400; font-size: 2.6rem; margin: 1rem; } `; </code></pre> <p>浏览器未请求字体文件。</p> <p>我在隐身模式下尝试过，所以这不是缓存问题。</p> <p>这是一个在多个站点上运行的分布式组件，因此我不能只在父 html 中加载字体。需要封装一下。</p> </question> <answer tick="true" vote="2"> <p>我最终只是动态地将样式加载字体添加到父页面：</p> <pre><code> this.fonts = ` @font-face { font-family: SpaceGrotesk; src: url(${this.host}/fonts/SpaceGrotesk-Medium.ttf); } @font-face { font-family: SpaceGroteskLight; src: url(${this.host}/fonts/SpaceGrotesk-Light.ttf); } `; const style = document.querySelector(&#39;style[data-description=&#34;tipme-fonts&#34;]&#39;); if (!style) { const el = document.createElement(&#39;style&#39;); el.dataset.description = &#39;tipme-fonts&#39;; el.appendChild(document.createTextNode(this.fonts)); document.head.appendChild(el); } </code></pre> </answer> </body></html>

自定义元素上的非数据属性可以成为标准属性吗？ [已关闭]

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

我们应该在自定义 Web 组件中使用数据属性吗？

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

插入带有自定义 Web 组件的表格行

我正在学习如何使用自定义 Web 组件。我尝试使用自定义组件创建一个表行。这是 HTML： &... 我正在学习如何使用自定义 Web 组件。我尝试使用自定义组件创建一个表行。这是 HTML： <table border="2"> <tbody> <table-row></table-row> <table-row></table-row> </tbody> </table> 这是 JavaScript： // Create a class for the element class TableRow extends HTMLElement { constructor() { // Always call super first in constructor super(); } connectedCallback() { let tr = document.createElement('tr') let td = document.createElement('td') td.textContent = "Row content"; tr.append(td); this.append(tr); } } customElements.define("table-row", TableRow); 这是一个 JSFiddle：https://jsfiddle.net/Imabot/c92fye8d/1/ 如您所见，它没有按预期工作。 我做错了什么吗？ 一般来说，构建自定义组件时，我们应该填充还是替换自定义标签<table-row></table-row>？ // Create a class for the element class TableRow extends HTMLElement { constructor() { // Always call super first in constructor super(); } connectedCallback() { let tr = document.createElement('tr') let td = document.createElement('td') td.textContent = "Row content"; tr.append(td); this.append(tr); } } customElements.define("table-row", TableRow); <table border="2"> <tbody> <table-row></table-row> <table-row></table-row> </tbody> </table> 您不能在表格中使用自定义标签，也不建议这样做。 您可以做的是将 a 定义为自定义行，如下例所示： class CustomTableRow extends HTMLTableRowElement { constructor() { super(); // Always call super first in constructor // Your custom initialization } connectedCallback() { let td = document.createElement('td'); td.textContent = "Row content"; this.appendChild(td); } } customElements.define('custom-table-row', CustomTableRow, { extends: 'tr' }); <table border="2"> <tbody> <tr is="custom-table-row"></tr> <tr is="custom-table-row"></tr> </tbody> </table>

如何将 Svelte 3 组件编译为可在 vanilla js 中使用的 IIFE

我正在 Vanilla JS 中制作一个 Web 组件，它在后台使用隐藏的选择，在前面使用 div 和 ul>li。从 api 等获取数据变得有点复杂，所以我转向

JS CustomElements - 首次实例化时自行“注册”

所以我正在寻找一种为自定义元素设置 ES6“抽象”基类的方法，该基类在子元素的第一次实例化时进行自我注册（window.customElements.define）。 我采取的方法...

设置滑动器 Web 组件导航按钮的样式

所以我对 Web 组件和 Shadow dom 相当陌生。 我正在尝试创建其中包含 swiper Web 组件的 Web 组件，到目前为止一切正常；虽然我正在尝试制作自定义导航...

如何让 jest 支持在 TS 文件中导入 HTML 文件？

我有一个项目，其中有一些脚本可以在其中构建打字稿Web组件（此处）。 我使用 rollup 和 typescript 来构建我的 Web 组件，我的 Web 组件文件如下所示： 从...导入 HTML

我应该如何引用角度自定义元素（Web 组件）中的资源

我创建了一个 Web 组件，并从其中引用了我的资产文件夹中的图像 如下 在本地一切都很好，我发布了我的

未定义的属性测试 Lit typescript Web 组件

我最近将一个lit web组件转换为Typescript，似乎无法弄清楚为什么我的测试现在失败了..在转换之前一切都工作正常。 这些是我的依赖项...

如何使用影子 DOM 附加样式表根据子节点选择器设置自定义 HTML 元素的样式？

我有一个自定义 HTML 元素，可以对按钮元素进行分组： 福 酒吧 巴兹 &...

仅使用CSS选择shadow-root中的元素

有什么方法可以在不使用JS的情况下更改shadow-root中的CSS吗？我的意思是仅CSS。我浏览了一些东西，但找不到一种没有 js 的方法。 假设我们有代码 有什么方法可以在不使用 JS 的情况下更改 Shadow-root 中的 CSS 我的意思是仅 CSS。我浏览了一些东西，但找不到一种没有 js 的方法。 假设我们有代码 <div id="parent"> #shadow-root (open) <div id="child"> </div> </div> 如何仅使用 CSS 访问子元素？ 仅当组件作者明确允许在影子 DOM 中的元素上使用 part 属性时。在这种情况下，您可以使用 ::part 伪元素选择器: 将 CSS 应用于该元素 这是一个例子： customElements.define('foo-bar', class extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}) this.shadowRoot.innerHTML = '<p part="baz">foo-bar here</p>'; } }); ::part(baz) { background-color: red; } <foo-bar></foo-bar> 请注意，您不能执行类似 ::part(foo) + .internal-css-class {...} 的操作（::part 不能成为复合选择器的一部分）。 除此之外，您始终可以使用CSS的继承属性，这些属性也会影响shadow DOM。例如。将 Web 组件放入 <h1> 将影响其字体大小和粗细（除非它专门为这些属性定义了自己的值）。

如何使用 Angular 库管理 Angular 元素？

我正在开发一个 Angular 17 项目，并且拥有一个带有设计系统库的 Angular 工作区。我的目标是将这个库中的一些 Angular 组件转换为 Web 组件，使它们可用...

如何在shadow dom中使用全局css样式

Shadow dom 封装了 css 样式，选择器不会跨越阴影边界。 问题：如何在shadow dom中使用全局通用的css样式？ （假设有一些常见的CSS样式......