From ffd32e52efd00830b377ade18fc912c150619ddb Mon Sep 17 00:00:00 2001
From: Jared White <jared@whitefusion.studio>
Date: Mon, 5 Sep 2022 09:23:47 -0700
Subject: [PATCH] Avoid bubbling events for sl-include (#897)

* Avoid bubbling events for sl-include

I ran into an issue where icons inside of an HTML include were dispatching `sl-load` events, which was causing my `sl-include` event handler to run multiple times. By adding these guards, we ensure only events immediately dispatched by the element itself will be handled.

* Use the correct event variable
---
 docs/components/include.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/components/include.md b/docs/components/include.md
index 870baf14f..c3fe68100 100644
--- a/docs/components/include.md
+++ b/docs/components/include.md
@@ -32,11 +32,13 @@ If the request fails, the `sl-error` event will be emitted. In this case, `event
 <script>
   const include = document.querySelector('sl-include');
 
-  include.addEventListener('sl-load', () => {
+  include.addEventListener('sl-load', event => {
+    if (event.eventPhase !== 2) return;
     console.log('Success');
   });
 
   include.addEventListener('sl-error', event => {
+    if (event.eventPhase !== 2) return;
     console.log('Error', event.detail.status);
   });
 </script>