照明DOMのスロット付き要素からシャドウDOMを伝播するのを防ぐ方法はありますか? -- ecmascript-6 フィールド と web-component フィールド と dom-events フィールド と shadow-dom フィールド 関連 問題

Is there a way to prevent events from slotted elements in the light dom from propagating througth the shadow dom?












0
vote

問題

日本語

問題

私は、ユーザーの操作によってトリガされたイベントを聴くサードパーティライブラリから複雑な要素Pを持っています。シャドウDOMにPを含むWebコンポーネントを作成し、スロットメカニズムを使用して、WのライトDOMに配置されている要素C要素がP。

私の問題は次のとおりです。インタラクティブな要素Cの場合、P。

で最終的なイベントリスナーをトリガすることなく、イベントがライトDOMに直接伝播するイベントを希望します。

試したこと

PREACHのスロットを直接アドイントさせる代わりに、私は私が作成した他の要素にスロットを追加しようとしました。この要素を参照して、この要素をブルリングするときにイベント伝播を停止します。カプセル化の用語では、この要素は光DOMからのスロット化された要素の親ではありませんが、それでもイベントがWに到達するのを防ぎます。

事態の再配置

外部lib p(p.js):

<事前> <コード> export function P(container) { const superComplexInnerHierachy = document.createElement("div") superComplexInnerHierachy.textContent = "Some P lib's interactive stuff" superComplexInnerHierachy.addEventListener( "click", () => console.log("I'm the third party P lib, I do stuff on click.") ) container.append(d1) const thingsIDo = { add : (elem) => { superComplexInnerHierachy.append(elem) superComplexInnerHierachy.append("More P lib's interactive stuff") } } return thingsIDo }

私が書いていることを試みているWeb Comnent W:

<事前> <コード> import {P} from "P.js" class W extends HTMLElement { constructor(){ this.attachShadow({mode : "open"}) this.value = "Something else" // Create the lib stuff in the shadow root this.p = P(this.shadowRoot) // Add a slot in P's hierachy to inject an element from the light dom const slot = document.createElement("slot") this.p.add(slot) } } customElements.define("w-component", W);

Wが使用されているHTMLスニペット。

<プレクラス= "LANG-HTML Prettyprint-Override"> <コード> <script type="module" src="W.js"></script> <w-component> <div name="an_interactive_element_usupecting_of_P"> <input type="button" value="Button A"> <input type="button" value="Button B"> </div> </w-component> <script type="text/javascript"> document.querySelector("w-component") .addEventListener("click", evt => { console.log(`${evt.target.value} was clicked`) }) </script>

振る舞い

現在のコード

の動作

をクリックすると

<コード> I'm the third party P lib, I do stuff on click.

<コード> Button A was clicked

p

で追加したものをクリックすると

<コード> I'm the third party P lib, I do stuff on click.

<コード> Something else was clicked

が欲しいのは何ですか?

をクリックすると

<コード> Button A was clicked

p

で追加したものをクリックすると

<コード> I'm the third party P lib, I do stuff on click.

<コード> Something else was clicked

英語

The problem

I have a complex element P from a third party library that listen to events triggered by user interaction. I want to write a Web component that contain P in its shadow dom, and using the slot mechanism, I want any element C elements put in W’s light dom to be displayed at some place in P.

My problem is the following : For element C that are interactive, I would like to have events propagating directly to the light dom, without triggering any eventual event listener in P.

What I tried

Instead of directly addint the slot in P herachy,I tried to add the slot in an other element that I created, add this element in P herachy and stop the event propagation when bublling in this element. In term of encapsulation, this element is not a parent of the sloted element from the light dom, but doing so still prevent the events to reach W.

Exemple reporducing the situation

The external lib creating P (P.js) :

export function P(container) {     const superComplexInnerHierachy = document.createElement("div")      superComplexInnerHierachy.textContent = "Some P lib's interactive stuff"      superComplexInnerHierachy.addEventListener(         "click",         () => console.log("I'm the third party P lib, I do stuff on click.")     )      container.append(d1)      const thingsIDo = {       add : (elem) => {         superComplexInnerHierachy.append(elem)         superComplexInnerHierachy.append("More P lib's interactive stuff")       }     }      return thingsIDo  } 

The web compenent W that I'm trying to write (W.js):

import {P} from "P.js"  class W extends HTMLElement {     constructor(){          this.attachShadow({mode : "open"})          this.value = "Something else"          // Create the lib stuff in the shadow root         this.p = P(this.shadowRoot)          // Add a slot in P's hierachy to inject an element from the light dom         const slot = document.createElement("slot")         this.p.add(slot)     } } customElements.define("w-component", W); 

The html snippet where W is used.

<script type="module" src="W.js"></script>  <w-component>    <div name="an_interactive_element_usupecting_of_P">       <input type="button" value="Button A">       <input type="button" value="Button B">    </div>  </w-component>  <script type="text/javascript">     document.querySelector("w-component")         .addEventListener("click", evt => {             console.log(`${evt.target.value} was clicked`)         }) </script> 

Behavior

The behavior of the current code

When clicking on A

I'm the third party P lib, I do stuff on click.

Button A was clicked

When clicking on things added by P

I'm the third party P lib, I do stuff on click.

Something else was clicked

What would like to have

When clicking on A

Button A was clicked

When clicking on things added by P

I'm the third party P lib, I do stuff on click.

Something else was clicked

</div
           

回答リスト

0
 
vote

解決策は、 # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 4 # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 5 の3rdパラメータを設定することで、シャドウDOMに送信される前のイベントをキャプチャにすることができます。 。

スロット付き要素から来ていて、自分で処理できることを検出した場合は、その伝播を防ぐために # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 6 を呼び出します。

<事前> <コード> # manual ip config.vm.network "public_network", auto_config: false config.vm.provision "shell", run: "always", inline: "ifconfig eth1 192.168.50.101 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:1 192.168.50.102 netmask 255.255.255.0 up" config.vm.provision "shell", run: "always", inline: "ifconfig eth1:2 192.168.50.103 netmask 255.255.255.0 up" 7
 

A solution could be to capture the event before it is transmitted to the Shadow DOM, by setting the 3rd parameter of addEventListener() to true.

If you detect that it comes from a slotted element and you can handle it by yourself, call stopPropagation() to prevent its propagation.

document.querySelector("w-component").addEventListener("click", evt => {     console.log(`${evt.target.value} was clicked`)     if ( evt.path.findIndex( elem => elem.localName === "slot" ) !== -1 )         evt.stopPropagation() }, true ) 
</div
 
 
   
   

関連する質問

11  テンプレートタグからクローニングされた要素へのイベントリスナの追加  ( Adding event listeners to elements cloned from the template tag ) 
9988777664 タグ付きの多くのDOM要素(それぞれ同じHTML構造体)を作成しています。 <事前> <コード> <template id="weapon-template"> <div class="button"> <di...

4  Angular 2はどのようにしてシャドウDOMを使用していますが、人気のあるブラウザではサポートされていませんか。  ( How angular2 is going to use shadow dom while its not supported in some popular ) 
documentations : コンポーネントがインスタンス化されているとき、角度 <事前> <コード> creates a shadow DOM for the component. loads the selected template into th...

1  ポリマーモジュールの複数の挿入点は?  ( Multiple insertion points in polymer module ) 
ポリマーでは、このようなカスタムモジュール内の <content> を使用してHTMLコンテンツの挿入ポイントを作成できます。 <事前> <コード> <my-custom-element> Surrounding HTML ... <content><...

0  定義済みの要素をカスタマイズする方法  ( How to customize predefined elements ) 
ポリマーの色の値を変えたい紙入力 ガイドを読みますが、そうではありませんでした。私のために理にかなった。 私はCSS変数で働いていませんでしたが、これはに従って行うべきです。 Mozilla CSSスペック <事前> <コード> // For shado...

87  ShadowDOMはReact.jsの仮想Domのように高速ですか?  ( Is shadow dom fast like virtual dom in react js ) 
私のプロジェクトでシャドウDOMを実装しても、Reactで使用される仮想DOMのようにそれらをより早くすることができますか? ...

0  コンテンツタグを動的に挿入します  ( Dynamically insert content tag ) 
<content> タグを動的に(オンデマンド)。 元: 親: <事前> <コード> <parent> <child> <grand-child></grand-child> </child> <parent> 子供...

3  Selenium - ノルウェー語BankIDのシャドウルート(開く)でパスワードを入力するためのキーを送信する  ( Selenium send keys to input password in a shadow root open and multiple ifra ) 
テストデータを使用して自動テストをしたいこちらノルウェーのBankIDと。しかし、Seleniumを使って入力フィールドを保持することはできません。 私がやろうとしていること: https://www.banknorwegian.no/ 「LOGG...

1  Chrome Extensionフォント素晴らしいシャドウルートには表示されません  ( Chrome extension font awesome wont display in shadow root ) 
My Chrome Extensionは、Shadow Rootを使用してPageをページに追加して、他のスタイルがMy DIVに影響を与えません。 しかし、私はこれをするので、私のフォント素晴らしいアイコンは表示されません。私は@ font-faceを使...

2  ポリマーカスタム要素属性アクセスまたは送信  ( Polymer custom element attribute access or send ) 
DOMからポリマーカスタム要素の属性にアクセスする方法を検索しています。 またはPolymer.RegisterからDOMにデータを送る。 以下の本当に単純な要素は2つの値を取り、それらを乗算し、結果を result 属性に配置します。 この結果から外部から...

1  シャドウドームを持つSelenium Webdriver  ( Selenium webdriver with shadow dom ) 
C#でSelenium WebDriverを使用している間、シャドウDOMの下に存在する要素を選択しようとすると、例外が表示されます。 例外は次のとおりです。<コード> NoSuchElementException シャドウDOMでSeleniumを使用...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有