web-component

1熱度

1回答

我試圖使用沒有任何抽象它的框架的影子DOM，主要是爲了瞭解它的錯綜複雜。我正在使用webcomponents.js填充，因此它可以跨瀏覽器工作。我已經設法創建了一個自定義元素，並設置了它的影子DOM，但由於某種原因<content></content>標籤沒有包含預期的內容。我希望這個例子來呈現爲 Shadow DOM Hello world More Shadow 但它呈現爲 Sha

1熱度

1回答

在TestCafe中等待'WebComponentsReady'事件的最佳方式是什麼？

我想在運行任何TestCafe測試之前等待頁面中的Web組件升級（換句話說，在運行測試之前等待WebComponentsReady事件）。做這個的最好方式是什麼？

0熱度

1回答

嵌套的Web組件和事件傳播

我有兩個Web組件。首先是輸入字段。其次是一個帶有按鈕的表單。我的頁面只需將輸入的Web組件放入表單Web組件中。輸入Web組件管理模糊事件以進行一些驗證。此驗證在發生錯誤時將一些元素添加到DOM中。表單Web組件管理按鈕上的點擊事件以執行一些操作。如果焦點位於輸入中，並且我單擊該按鈕，則會觸發模糊事件，但不會觸發點擊事件。如果我刪除了在DOM中添加一些元素的代碼（在blur事件中），這兩

2熱度

1回答

添加/刪除在陰影DOM中定義的類

我製作了一個非常基本的Web組件。我使用自定義元素構造函數編寫的JavaScript添加和刪除類。爲什麼當我將文檔的樣式表中的類移動到自定義元素的影子DOM中的樣式表時，我的javascript不再能夠添加或刪除它們？ class BgAnim extends HTMLElement { constructor() { super() this.atta

1熱度

1回答

如何從Angular的子組件中的「top component」獲取DI？

From Angular documentation： Create a "top component" that acts as the root for all of the module's components. Add the custom HttpBackend provider to the top component's providers list rather than the

0熱度

1回答

將React事件轉換爲Webcomponent事件

React文檔提供瞭如何在webcomponent內使用反應的示例。但提供的the example是微不足道的，並不足以吸取教訓。特別是它沒有提供關於如何從webcomponent冒出一個事件的信息。假設代碼開始作爲 const proto = Object.create(HTMLElement.prototype, { attachedCallback: { value:

0熱度

1回答

使用模板字符串和arr.reduce呈現的導航列表的改進語法（）

爲了解決框架問題，我正在試驗ES6中的一些最新功能。現在我正在構建一個導航菜單。這就是我爲渲染模板所得到的。 // Prepare navigation container var navMenuEl = document.createElement('div'); navMenuEl.id = 'lesson-navigation'; navMenuEl.className = 'menu

0熱度

1回答

使用Forms和Rest API創建可重用的窗口小部件

我們有一個React/Reduct網絡應用程序。我們想創建一個可重用的表單（可以集成到一些公共網站中）。該表單捕獲了一些輸入併發布到我們的後端REST API。 REST API使用OAuth2（Spring oAuth）進行保護。問題什麼是最好的框架（不一定反應，我們是靈活的）建立支持形成一個可重複使用的現代小工具？（我們正在考慮Webcomponent，Polymer等）？我們怎樣才

1熱度

2回答

Web組件渲染性能

與本機HTML元素相比，Web組件是否提供更好的性能？由於每個元素只有在連接到DOM時纔會發生變化。因此，在Element回調內部進行昂貴的操作會導致較差的性能。我在connectedCallback句柄中編寫了一個帶有一些昂貴實現的示例Web組件，當我嘗試渲染該組件時，每個組件都花費了連續的時間。我在Web Components上看不到任何與引用相關的性能引腳點。更新1 我有本地和Web組

5熱度

3回答

使用：主機選擇器vs容器div

我看到它的方式，它可以用作容器的替代品，用於爲組件設計樣式。例如：使用容器 @Component({ template: ` <div class="container"> <h1>Some Title</h1> <p>Some Content</h1> </div> `, styles: [` .co