使用動態 class 組成點亮模板

[英]Composing lit template using a dynamic class

有沒有一種方法可以使用動態派生的 Lit 元素在 Lit 中組成模板？ 我說的是這樣的： import { chooseCorrectComponent } from "./chooseCorrectComponent.js"; let myLitElement = chooseCorrectCom ...

如何在觸發特定事件時更改 Lit Element 的樣式？

[英]How to change the style of a Lit Element when a certain event is triggered?

（Lit 元素環境的新手，對於天真的問題深表歉意） 代碼摘要下面的代碼是使用 Lit Element 制作的 File Uploader web 組件。 選擇文件后，_inputHandler function 驗證文件，如果有效，則啟用/觸發上傳到服務器端的功能。 問題如何將#cancel-b ...

在使用 lit、esbuild 和 ts 的現代網絡 web 開發服務器設置中使用 axios 在轉換 axios/lib/adapters/http.js 時導致錯誤

[英]using axios in a modern-web web-dev-server setup using lit, esbuild and ts results in an error while transforming axios/lib/adapters/http.js

最小可重現示例首先，這是一個可以重現問題的回購協議： https://github.com/wimdetroyer/litelement-ts-esbuild-axios 可以通過運行npm run start或npm run test來重現該問題問題我正在嘗試在 lit-element-ts-b ...

部署 Lit Web 組件 - 在部署時遇到困難

[英]Deploying a Lit Web Component - Struggling at deployment

我是專門點亮的新手，一般來說是 web 組件。 我構建了一個 web 組件用於 Wix（作為自定義元素），僅使用普通 js，並取得了一些成功。 有關我構建的示例，請參見https://app.njaplatform.one/rating-element.js 。 但是，我被要求在 Lit ( htt ...

Lit Web 組件 - 嘗試 select 元素

[英]Lit Web Component - Trying to select element

我正在嘗試使用 Lit 將此元素轉換為標准的 web 組件。 ( https://www.w3schools.com/howto/howto_js_image_comparison.asp ) 我對 Lit 和 web 個組件完全陌生，並且正在努力從影子 DOM 中獲取 select 個元素。 現 ...

LitElement 和服務器端渲染

[英]LitElement and server side rendering

我一直在嘗試使用 LitElement 制作一個 Web 組件，該組件可與 NextJS 和 VueJS 等服務器端渲染環境 (SSR) 一起使用，而無需任何卡頓的僅客戶端導入。 根據 Lit 的文檔，這應該是可能的，但我一直window is not defined in NextJS。 到目前為 ...

如何使用 karma-jasmine 在 function 中使用具有異步等待的單擊處理程序自動測試 function？

[英]How to automate testing function with click handler that have async await inside the function using karma-jasmine?

所以我正在嘗試測試異步運行 function 的按鈕。 這是我的按鈕邏輯。 這是我的測試 我正在使用 lit-element，只是它與 React 類似，我有自定義元素 <define-module>，里面有按鈕。 然后我給它所需的屬性，然后它就會呈現。 這是我的測試日志測試日志如您所 ...

如何使用 jest 和 jsdom 在 lit-html 中測試事件和樣式 unsafecss

[英]How to test event and style unsafecss in lit-html using jest and jsdom

我正在嘗試使用 jest 為我的 lit-html 元素創建單元測試。 我想檢查點擊事件是否按預期工作。 測試單擊時從活動狀態變為禁用狀態的事件。// my-lit-html-toggle.ts const TAG = 'my-lit-html-toggle'; @customElement(T ...

為什么 Lit Labs Router `goto` 方法沒有更新地址欄中的 URL？

[英]How come Lit Labs Router `goto` method isn't updating URL in address bar?

我有一個這樣的電話：this._router.goto(`http://localhost:8000/${this.nav.selected}`); 當我做 relative 時，頁面更新時沒有地址欄。 當我執行完整的 URL 時，出現錯誤。 文檔說goto “采用完整 URL 進行頂級導航，並 ...

css::部分偽選擇器 Chrome 兼容性？

[英]css ::part pseudo selector Chrome compatibility?

最近在學習自定義元素和Lit js。 我正在嘗試使用::part偽選擇器來設置我的組件的樣式。 這適用於 Firefox，但它似乎不適用於 Chrome。 據我所知，兩者都應該支持這一點。 我已經能夠在代碼筆中復制該問題（鏈接如下）。 我是否應該期望此代碼在 Chrome 中呈現紅色方塊？impo ...

如何動態地向光照元素添加屬性？

[英]How Do I Dynamically Add an Attribute to a Lit Element?

我想動態地向 Lit 錨元素添加一個屬性，但我不知道該怎么做。 具體來說，我想添加下載屬性。 簡單屬性這有效： 這不會： 具有價值的屬性這有效： 這不會： 關於如何讓 Lit 將 downloadAttribute 作為屬性而不是它忽略的字符串來讀取的任何想法？ ...

lit-element v2 清除具有 null 屬性的文本字段

[英]lit-element v2 clearing text fields with null properties

我有基於 forms 的 lit-element，可重復用於編輯實體。 作為示例，考慮具有以下字段的名稱表單 用戶從某個列表中選擇一個實體，我用相應的值填充屬性firstName, middleName, lastName 。 然后用戶可以編輯這些值並按下保存按鈕，該按鈕讀取文本字段的值，例如 並將 ...

在 JS 中的標記模板字符串中插入一個正常值

[英]Interpolating a normal value within a tagged template string in JS

Javascript 標記的模板字符串 是對每個插值變量做有趣事情的非常棒的方法，而不是它們只是成為字符串的一部分。 與未標記的模板不同，例如 如果const name = 'Mary'; 已設置將產生與'<h1>hello Mary</h1>'無法區分的字符串。 在標記模 ...

LitElement 從不同的文件創建 DOM 元素並控制 CSS

[英]LitElement create DOM element and control CSS from a different file

一切順利。 我有一個點亮的元素。 我動態添加一個 DOM 元素： 問題是我無法從我的樣式文件中更改此元素的 CSS： 但是，我可以內聯 CSS 樣式。 如何從我創建的已經定義的 CSS 文件中控制 CSS？ 謝謝 ...

如何從 litelement 中的字符串渲染組件

[英]How to render component from string in litelement

如何從 litelement 中的字符串渲染組件？ 是否有可能將字符串轉換為 TemplateResult？ 我的代碼不工作 ...

如何在調用 shouldUpdate 時進行一些更改？

[英]How to make some changes when calling shouldUpdate?

我想做以下事情： 當屬性“mobile”改變時，檢查 X 是否為真，如果是，設置一個變量 Y 並調用 requestUpdate 重新渲染元素。 該元素將根據變量 X 呈現不同的內容。 所以 shouldUpdate 函數可以是： 不使用 shouldUpdate 函數的最佳方法是什么？ ...

如何解決 lit 內置指令導入錯誤？

[英]How to solve the lit build-in directives import error?

將 lit 2.5.0 與 vite 結合使用時，我在使用 lit 內置指令時遇到了問題。 按照文檔，我向我的 lit js 組件添加了一個導入，例如：import { when } from 'lit/directives/when'; 但是當我在瀏覽器中查看生成的站點時，我總是會收到一個丟失 ...

如何在與 ScopedElementsMixin 的反應中調用 lit 組件

[英]How to call lit component in react with ScopedElementsMixin

我想在我的項目中使用帶有類似標簽的 web 組件 Button (lit)。 例如：如果標簽<button-test>存在於網站上，則創建標簽<button-test-12345> 。 這就是我使用 ScopedElementsMixin 的原因。 是否可以調用按鈕測試標簽， ...

如何在LitElement web 組件中導入highcharts-border-radius 插件？

[英]How to import highcharts-border-radius plugin in LitElement web component?

使用 LitElement 創建了一個 web 組件，並在其中使用 highcharts 創建了一個 columnrange 圖表，現在我只想將邊框半徑添加到欄的左上角和右上角，為此，我安裝了 highcharts-border-radius 外部插件給 borderRadiusTopLeft 和 ...

為什么 TS 不知道我在使用 Lit 的@property？

[英]Why doesn't TS know I am using @property from Lit?

我有這樣最基本的 Lit 代碼：import { property } from 'lit/decorators.js'; export class MyClass extends LitElement { @property() rows = []; } 在這個示例之外，行有數據。 ...