問題タブ [html-imports]

Shadow Dom のページに svg アイコンをレンダリングする Web コンポーネントを構築しています。すなわち

大量の SVG アイコンを含む外部 svg スプライト ファイルがあります。

Web コンポーネントの内部は、以下を Shadow Dom にレンダリングします。

すべてが画面に正しくレンダリングされていますが、SVG 内に埋め込まれている情報、特に , に含まれる情報viewbox(例: viewBox="0 0 32 32") が必要です。

でレンダリングされたものがuseShadow Dom にも入力されることはわかっています。しかし、に埋め込まれた情報を取得する別の方法を見つけようとしていますuse。svg のコンテンツを ajax しようとしましたが、Web コンポーネントの各インスタンスがその呼び出しを行っているため、これはページ上の複数のアイコンにとって大きな問題になっています。他にどうすればこれを行うことができますか?

参考のため：

私は一連の Polymer 要素 (この特定のケースではボタン) に取り組んでおり、その一部は同じ HTML スニペットを再利用する必要があります。カスタム ボタンの構造は次のとおりです。

スタイルと動作は正常に機能します。

問題は次のとおりです。別の要素としてbutton-base.html定義してからそれを使用せずに、コンテンツをローカルDOMの指定された場所に取得する方法がわかりません。button-base<button-base></button-base>

新しい要素への変換を避けたい理由は次のとおりです。

• のコンテンツを要素のローカル DOMbutton-baseの第一級市民にcustom-buttonして、動作で定義されたすべてのメソッドが、this.myMethod()インポートせずにbutton-baseカスタム ローカル DOM を使用するボタンのみを使用して適用されるようにしたいと考えています。
• この new のプロパティを宣言的に設定しcustom-buttonて、DOM 要素にbutton-base.html自動的に反映されるようにする必要があります。

たとえば、の内容は次のbutton-base.htmlとおりです。

新しい要素を介してすべての可能な属性をプロキシすることなく、自動的にマップされるようraisedに myに設定したいと思います (新しい要素として定義し、それを のようにインポートする場合)。custom-buttonpaper-buttonbase-button<base-button></base-button>custom-button

このインポートを機能させる方法についてのアイデアはありますか?

プロジェクトのすべてのリソースを cdn からcors有効にして読み込んでいますが、最初のページの読み込みで html インポートが失敗します (その後の読み込みで成功します)。

次のエラーが発生します。

私はほぼすべての関連ページを検索し、次のような100万のソリューションを試しました:

1. s3バケットにcorsヘッダーを追加すると、範囲が問題を解決したと言う人もいれば、公開ヘッダーが問題を解決したと言う人もいます。すべてを追加してそれらを切り替えましたが、同じ問題です。

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://*</AllowedOrigin> <AllowedOrigin>https://*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <ExposeHeader>ETAG</ExposeHeader> <ExposeHeader>Accept-Ranges</ExposeHeader> <ExposeHeader>Content-Range</ExposeHeader> <ExposeHeader>Content-Encoding</ExposeHeader> <ExposeHeader>Content-Length</ExposeHeader> <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> <AllowedHeader>range</AllowedHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

2. cors仕様では、corsヘッダーが重複するとリクエストが失敗すると言われているので、重複がないことを確認しました。

3. プリフライト リクエストがサーバーで有効になっており、必要なすべての構成 (許可されているヘッダーなど) が含まれています。

タグが使用にscript追加された場合、ブロックされず、属性があるかのように動作することをどこかで読んだことを覚えています。今日、私はこの記事を読んでいましたが、次のコード スニペットがあります。DOMappendChildasync

タグについて説明されている動作は、scriptタグと同じではないのlinkでしょうか? async属性を手動で追加する理由

私はカスタム要素を扱っています。これらの多く (特に Polymer のようなライブラリ) は、HTML インポートを使用してコンポーネントをロードします。

ほとんどの要素には、いくつかの CSS、いくつかの HTML、およびいくつかのスクリプトが含まれており、これらは別個.cssの.js/にすることができ.ts、多くの場合、文字列 (または React/Preact.tsxファイル) に HTML が埋め込まれています。

HTML インポートを使用した、より洗練されたソリューションがあります。

そして、でmy-component.html：

別のファイルを使用して外部で TypeScript を使用でき.tsますが、それは少し面倒です。私がやりたいことは、ほとんど同じように見えるファイルですが、Javascript の代わりmy-component.htmlにmy-component.tshtmlTypeScript があり、またはファイル.htmlとまったく同じ方法でバージョンに変換されるファイルです。.ts.tsx

これを行う方法はありますか？