プログラミング web-component

2

プロジェクトにShadowDOMを実装すると、Reactで使用される仮想DOMのように高速になりますか？

86 dom web-component shadow-dom virtual-dom

2

非推奨にcustom elements spec v0なった両方の仕様と最新の安定バージョンで動作する必要があるコンポーネントを構築する必要があります。custom elements spec v1 custom elements v0スペックを使用してコンポーネントをビルドすると、一部のアプリはスペックpolymer 2をpolymer 1使用していないアプリケーションで同様の問題が発生しますcustom elements v1。私は、ポリフィルを変更するアプリケーションを制御できません。一部のアプリケーションは、ポリフィルを使用する必要があり、古い仕様をサポートしているものもあれば、新しいポリフィルを使用しているものもあります。ポリフィルのバージョンに関係なく、両方の仕様を組み合わせてすべてのアプリケーションでカスタム要素を実行するための確実なソリューションを探しています。私はコンポーネントに任意のポリフィルまたはスニペットを追加して、どこでも実行できるようにすることができます。私の研究では、両方の仕様をサポートするライブラリやポリフィルは見つかりませんでした。添付のコールバックについて、以下で説明するマッピングのような両方の仕様を組み合わせることができるアダプターを作成することを計画しています。この考えに関する入力は大歓迎です。 connectedCallback(){ this.attachedCallback(); } 私はstenciljsを使用しようとしましたが、それはカスタム要素仕様の最新バージョンでのみ機能します。以前の仕様で動作するように調整する方法はまだ見つかりません。上記の状況に対するいくつかの実行可能な代替案と実行可能な解決策を提案してください。

9 javascript html web-component polyfills custom-element

1

mwcテキストフィールドに高さのミックスインを追加する方法は？

私はポリマー3とlit-element（2.2.1）を使用しています。mwc-textfieldのバージョンは0.13.0です。このバージョンに関連するドキュメントを読みました。このドキュメントでは、高さにミックスインを追加できることがわかりました。私はいくつかの方法を試しましたが、成功しませんでした。私が使用している構文が間違っている可能性があります。テキストフィールドの高さを低くしたい。これは私のテキストフィールドです <mwc-textfield id="textBox" .type="text" .value=${this.title} .placeholder='' minLength="10" maxLength="256"></mwc-textfield> そして私のCSS #textBox{ text-transform: none; --mdc-theme-primary: transparent; --mdc-text-field-fill-color: #fff; --mdc-text-field-hover-line-color: #f5f5f5; --mwc-text-width: 100%; width:100%; } 適用されるデフォルトのCSSは :host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) { background-color: transparent; } .mdc-text-field:not(.mdc-text-field--disabled) { background-color: rgb(245, 245, 245); } .mdc-text-field { display: flex; width: 100%; } .mdc-text-field { height: 56px; display: inline-flex; position: …

8 html web-component lit-element polymer-3.x lit-html

1

ShadyCSSポリフィルがEdgeでCSSを適切に処理しない

サードパーティのWebサイト用のウィジェットを構築しています。シャドウDOMを使用して、CSSが私たちのWebサイトに干渉しないようにしています。私が使用していますShadyDOMとShadyCSSそれがエッジで動作させるためpolyfillsをし、IEが、私が期待するように、影のDOMのためのCSSを変換されていません。例： <!DOCTYPE html> <html> <head> <title>Shadow DOM test</title> </head> <body> <div id="container">container is here</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script> <script> const shadow = document.getElementById("container").attachShadow({ mode: "open" }); const style = document.createElement("style"); style.innerHTML = ` :host .stuff { background: #ff00ff; } `; shadow.appendChild(style); const div = document.createElement("div"); div.classList.add("stuff"); div.innerHTML = "stuff inside shadow …

8 javascript web-component shadow-dom polyfills shady-dom

タグ付けされた質問 「web-component」

タグ付けされた質問「web-component」