web-component 相关问题

Web组件是使用本机代码或第三方库创建的可重用客户端元素。

在弹出窗口中使用 Web 组件在 Firefox 中不起作用

TLDR 在弹出窗口中添加 Web 组件在 Chrome / Edge 中按预期工作。但在 Firefox 中，在我将 Web 组件添加到 dom 之前它可以正常运行，但之后它又恢复为

javascript firefox web-component custom-element

回答 1 投票 0

使用 WebComponent 定义常量的最佳方法是什么？

更新：我添加了有关如何使用常量来回答问题的更多详细信息。我观察到的实际问题是常量被添加到全局对象中，所以我担心

javascript html constants web-component standards

回答 2 投票 0

如何使用 Fast Web Components 设置浅色/深色主题？

我正在使用https://www.fast.design/docs/components/checkbox 在一个简单的 HTML 页面中，但默认主题似乎是深色的......所以“白色背景”上的“白色文本”：它......

javascript html performance web-component

回答 1 投票 0

将内容放置在自定义元素内作为组件输入的首选方法？

我正在尝试开发一个语法突出显示的 Web 组件，它将把内容放入其中并语法突出显示它。所以像这样：我正在尝试开发一个语法突出显示的 Web 组件，它将把内容放入其中并语法突出显示它。所以像这样： <fs-highlight data-line-numbers="true" data-language="html"> any content here .... </fs-highlight> 这是一个原型实现，它获取并突出显示元素内的内容，如下所示： this._code = hljs.highlight(this.innerHTML.replace(/^\s+/g, ''), { language: this.language, }).value; 我想知道使用 this.innerHTML 来抓取内容是否正确/合适？该实现未使用 slot，因此内容不会在元素内呈现。但是在这个demo中，vite无法编译该元素。不过，我想知道这是否只是由于 Stackblitz vite 编译的工作原理所致......（我在元素中放置了大量标记来测试它......）？也许通过本地编译和发布，这种情况就会消失......想法？发生这种情况是因为您的样式位于 Web 组件之外！要修复它，只需将 @highlight.js 的脚本放入您的组件即可！ render() { if (this.language) { return html` <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css" /> <h1>Hello</h1> <pre><code class="language-${this.language}">${unsafeHTML( this._code )}</code></pre> `; } return html` <link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css" /> <h1>Hello</h1> <pre><code>(${unsafeHTML(this._code)})</code></pre> `; }

javascript html typescript web-component lit-element

回答 1 投票 0

看起来很奇怪<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"

vaadin web-component

回答 1 投票 0

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

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

web-component custom-element htmx shoelace

回答 1 投票 0

state 和 setState 点亮元素在哪里？

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

polymer web-component lit-element lit-html

回答 2 投票 0

将 Material ui 与 Preact 结合使用

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

material-ui web-component preact

回答 1 投票 0

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

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

javascript web-component

回答 3 投票 0

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

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

javascript c# asp.net-core blazor web-component

回答 1 投票 0

@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 = ` <style> @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('style[data-description="tipme-fonts"]'); if (!style) { const el = document.createElement('style'); el.dataset.description = 'tipme-fonts'; el.appendChild(document.createTextNode(this.fonts)); document.head.appendChild(el); } </code></pre> </answer> </body></html>

html css web-component shadow-dom

回答 0 投票 0

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

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

html web-component custom-data-attribute lit-element

回答 1 投票 0

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

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

html web-component custom-data-attribute lit-element

回答 1 投票 0

插入带有自定义 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>

javascript html web-component

回答 1 投票 0

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

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

javascript svelte web-component svelte-3 iife

回答 1 投票 0

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

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

javascript web-component custom-element

回答 1 投票 0

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

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