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

@@ -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>