問題タブ [stencil-component]

ネストされた 2 つの Web コンポーネントを作成しました。私が直面している主な問題は、子コンポーネントをレンダリングしようとすると、親からのすべてがオーバーラップすることです。問題は、親コンポーネントと子コンポーネントの両方がレンダリングされていることだと思います<slot/>。ご覧のとおり、親コンポーネント renders <slot></slot>. そして、子コンポーネントはその名前で各スロットもレンダリングします。私が見つけた唯一の「解決策」はshadow:true、子要素でシャドウを true( ) に設定することです。この方法では、子のみ<slot/>が表示され、重複しません。親によって。しかし、子コンポーネント内で別のコンポーネントをレンダリングしたいので、それはうまくいきませんが、これはシャドウ DOM であるため、何も表示されません。アイデアはありますか?、ありがとう。

次の Web コンポーネント ツリーを使用しています。

そして、background-coloronをオーバーライドする必要がありますselect-container。<x-select>コードにはアクセスできません<x-typography>。

私は方法:hostと::slotted動作を知っています、私は試しました:

しかし、どれも機能しません。

stencils.js で単純な 1 つのコンポーネントを作成し、それを react/angular/vue で使用しました。ステンシル コンポーネントからイベントを発行しました。このイベントは angular/react/vue でキャプチャされます。私の問題は、1 つの html で同じコンポーネントを 2 回使用する必要があることです。どのイベントがどのコンポーネントインスタンスによって発行されているかを特定するにはどうすればよいですか?

呼び出されたコンポーネント タグを HTML から削除して、外部ライブラリからの破損した CSS を防ぎ、内部コンテンツのみを表示しようとしています。

何か.component.html

another.component.html

次に出力します。

そして私が欲しい：

親コンポーネントから子コンポーネント関数をトリガーし、stenciljs でデータを送信する方法

から<parent-component>、関数 onClick を実行してから、 <child-component>@Listen デコレータを使用せずに関数でデータを送信してみます。