僅在另一個自定義元素中定義自定義元素
[英]Define custom element within another custom element only
我們知道我們可以像這樣注冊我們的自定義元素： 現在，這個元素可以像這樣使用了： 但是，對於特定的 ShadowRoot 是否有某種范圍內的 CustomElementRegistry？ 我正在開發一個需要將一些自定義元素注入頁面的瀏覽器插件，但我想避免意外地與主機頁面可能定義的自定義元素發生沖突。 ...
在滾動文本自定義 HTML 元素中單行顯示的長文本行
[英]Long lines of text to show in a single line in scrolling text custom HTML element
我想創建一個滾動文本橫幅自定義 HTML 元素。 我發現本網站 ( https://blog.hubspot.com/website/scrolling-text-css ) 中的第一個示例與我想做的非常接近。 我在上面遇到的一個問題是，如果我有一個很長的文本（即像一個段落），以至於它超過了容器的寬 ...
Blazor 自定義元素不適用於 Blazor 服務器和 Angular
[英]Blazor Custom element not working with Blazor Server and Angular
我使用 Angular 和 ASP.Net 核心項目模板創建了一個應用程序，以在 Blazor 服務器中使用 Blazor 自定義元素。 我創建了組件並將其注冊為官方文檔中建議的自定義元素。 我通過參考 ring the asp labs sample為 angular 添加了代理配置和其他更改。 ...
嘗試向自定義元素添加一個名為“key”的屬性，但 React 正在刪除它
[英]Trying to add an attribute called "key" to a custom element but React is removing it
我正在 React 中構建一個 static 站點（使用 Gatsby 框架）。 該站點用於瑜伽工作室，我需要將工作室預訂表格小部件嵌入到頁面上。 該小部件由名為 GymCatch 的服務提供。 要嵌入他們的小部件，您必須添加一個自定義的 html 元素，該元素具有名為“key”的屬性 - 您可以將 ...
錯誤事件偵聽器不適用於 web 組件/自定義元素
[英]Error event listeners not working on web components / custom elements
我正在嘗試將unhandledrejection和error事件偵聽器附加到 web 組件。 目標是為組件內的任何錯誤提供一個通用的錯誤處理程序。 使用下面的代碼，偵聽器存在但不觸發。 如果我將它們附加到window ，它會按預期工作。 但我不能使用它，因為主機應用程序可能有自己的錯誤處理程序。 ...
是否可以將帶有 attachShadow 的插槽用於文本區域？
[英]is it possible to use slot with attachShadow for a textarea?
創建自定義 shadowDom 元素時，是否有某種方法可以將<slot>與<textarea>一起使用？ 根據標准（我猜是預期的）textarea 行為，它的內容正在將 <slot></slot> 轉義為<slot></slot&g ...
Angular mat-form-field/mat-label 問題
[英]Angular Problem with mat-form-field/mat-label
我開始學習 Angular 材料，但我在從他們的站點添加示例時遇到了問題。 我在 html 文件中添加了： 而且我幾乎沒有錯誤：'mat-form-field' 不是已知元素： 如果“mat-form-field”是一個 Angular 組件，則驗證它是該模塊的一部分。 如果“mat-form-fi ...
如何在自定義 Web 組件中覆蓋/代理 disconnectedCallback
[英]How to override/proxy disconnectedCallback in Custom Web Components
我正在嘗試代理自定義元素的任何實例的disconnectedCallback 。 這是嘗試這樣做的簡化版本：const template = document.createElement("template"); template.innerHTML = `<button id="butto ...
如何將“:host”（或“:host()”）與“:has()”一起使用
[英]How to use ":host" (or ":host()") with ":has()"
有人知道如何將:host （或:host() ）與:has()一起使用嗎？ 例如這樣的事情：:host:has([disabled]) { opacity: 0.75; } 要么:host(:has([disabled])) { opacity: 0.75; } 使用我示例中的語法，不應 ...
在 Vue.js 自定義元素中使用 bootstrap css 和其他全局 css
[英]Use bootstrap css and other global css in Vue.js custom elements
沒有花哨的 webpack，簡單的 Vue 自定義元素，帶有一些全局 css 和一些內聯 css 用於覆蓋。 我想使用一些樣式庫，比如來自 getbootstrap.com 並讓它在自定義元素內更改 styles。 https://jsfiddle.net/Deele/6xk1atrn/25/& ...
為什么 display:flex 不尊重陰影根邊界？
[英]Why do display:flex do not respect shadow root border?
如果您在影子根子元素上切換display:flex ，它也會影響外部元素。 （所有大型瀏覽器的行為都是如此。）為什么？ 有一個帶有影子根的 web 組件： 在 shadow root 里面有一個帶有 display:flex 的 div： 完整的例子： class demo extends H ...
getElementById 嘗試從 customElement 訪問組件時返回 null
[英]getElementById returning null when trying to access component from customElement
我創建了自己的組件，其中包含 2 個輸入（類型：范圍、數字）。 我想在單擊另一個復選框后隱藏其中一個，但 getElementById 返回 null。 錯誤 這是在一個js文件中 這是我的自定義元素 我在我的自定義元素中添加了樣式，所以我不明白這個錯誤。 我應該改變什么才能讓它工作？ 或者單擊復 ...
自定義 defineCustomElement 實現中缺少插槽
[英]Slots are missing in custom defineCustomElement implementation
我們正在使用 Vue 3、TS 和 Tailwind 在 web 組件庫中工作。 我們正在為 defineCustomElement 宏使用自定義實現， 其中 @tony19 能夠提供 vue-router 和 pinia 等插件支持。 每個功能都完美無缺，插槽除外。 這里有一個使用這個自定義宏和 ...
Angular 元素的單元測試（在 CustomElementRegistry 中注冊為 HTML 自定義元素）單獨通過但一起運行時失敗
[英]Unit tests of Angular Elements (registered with the CustomElementRegistry as a HTML Custom Element) pass individually but fail when run together
我正在使用 Angular Elements https://angular.io/guide/elements這允許我創建一個 angular 組件，定義一個標簽名稱，並將其注冊為 CustomElementRegistry https.mozilla中的一個 HTML 自定義元素組織/en-US ...
如何正確處理帶有子元素的 Javascript 自定義元素（Web 組件）？
[英]How to properly handle Javascript custom element (Web Component) with children elements?
我有一個Custom Element ，它應該有許多 HTML 孩子。 我在類的constructor中初始化它時遇到了這個問題（結果不能有孩子）。 我理解為什么並且知道如何解決它。 但是我現在應該如何圍繞它設計我的 class 呢？ 請考慮以下代碼： class MyElement exten ...
帶有 web 組件的故事書 - 在代碼上動態更改 arguments
[英]Storybook with web components - changing arguments dynamically on code
我有一個模態組件，我正在為它寫故事。 它看起來像這樣：import { Story, Meta } from '@storybook/html'; export default { title: 'Components/Modal', argTypes: { open: { ...
在未實現接口 HTMLTableElement 的 object 上調用“createTHead”
[英]'createTHead' called on an object that does not implement interface HTMLTableElement
我正在嘗試創建一個擴展HTMLTableElement class 的自定義Web 組件。 代碼比較簡單： 當我嘗試調用createTHead()時出現錯誤。 根據文檔，這是HTMLTableElement的 function（我的 class 擴展）並返回HTMLTableSectionElem ...
如何修復 Typescript HTMLElement 構造函數：需要“new”
[英]How to fix Typescript HTMLElement constructor: 'new' is required
我正在使用 TS 制作循環自定義元素。 當我制作 Loop class 時，它編譯為 function 並在var Loop內的_super.call(this)處捕獲錯誤我的 Typescript 文件class Loop extends HTMLElement { constructor( ...
更改 shadowRoot.innerHTML 停止屬性和事件的繼承行為
[英]Changing shadowRoot.innerHTML stop inherited behavior for attributes and events
下面ake-class2繼承自/擴展ake-class1 。 將<select>元素添加到ake-class2.shadowRoot 。 console.log this.clickme按鈕以確保它被正確繼承。 如果沒有在注釋后再次添加行， clickme按鈕將不起作用ake-clas ...
自定義元素 - 圖像源未定義
[英]custom Element - image src undefined
我正在為 Instagram 模板創建一個 customElement，並且我正在嘗試使圖像 src 成為變量，以便根據需要進行更改。 當我說明屬性時，我正確調用了圖像所在的位置。 當我加載頁面時，圖像不收費，當我檢查代碼時，它說圖像 src 它是未定義的。 這是另一部分 這是我在屏幕上看到的： ...