From eba6b2e6adaca253075e917bb0b72b9f15d70525 Mon Sep 17 00:00:00 2001
From: Buddy <git@buddy.wtf>
Date: Wed, 10 Jun 2026 07:13:49 -0700
Subject: [PATCH] refactor: use type="base" instead of slot="base" for
 control-layers

slot is a reserved HTML global attribute with shadow-DOM semantics;
using it was misleading even though it happened to work. Switch to
type="base" / type="overlay", which is conventional and carries no
side effects.
---
 demos/layers-control.html                | 6 +++---
 src/components/leaflet-control-layers.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/demos/layers-control.html b/demos/layers-control.html
index a1f37ed..6703555 100644
--- a/demos/layers-control.html
+++ b/demos/layers-control.html
@@ -16,20 +16,20 @@
     <leaflet-map id="map" lat="51.5" lng="-0.09" zoom="12">
       <leaflet-control-layers position="topright" collapsed>
         <leaflet-tile-layer
-          slot="base"
+          type="base"
           name="OpenStreetMap"
           checked
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution="&copy; OpenStreetMap"
         ></leaflet-tile-layer>
         <leaflet-tile-layer
-          slot="base"
+          type="base"
           name="Light"
           url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
           attribution="&copy; CARTO"
         ></leaflet-tile-layer>
         <leaflet-tile-layer
-          slot="base"
+          type="base"
           name="Dark"
           url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
           attribution="&copy; CARTO"
diff --git a/src/components/leaflet-control-layers.ts b/src/components/leaflet-control-layers.ts
index 2b4da58..ffaa4c1 100644
--- a/src/components/leaflet-control-layers.ts
+++ b/src/components/leaflet-control-layers.ts
@@ -19,7 +19,7 @@ export class LeafletControlLayers extends WithProps(HTMLElement, PROPS) {
       const layer = (child as unknown as { leafletObject?: Layer }).leafletObject;
       const name = child.getAttribute('name');
       if (!name || !layer) continue;
-      const base = child.getAttribute('slot') === 'base';
+      const base = child.getAttribute('type') === 'base';
       const checked = child.hasAttribute('checked');
       (base ? baseLayers : overlays)[name] = layer;
       if (!checked) uncheckedLayers.push(layer);
@@ -81,7 +81,7 @@ export class LeafletControlLayers extends WithProps(HTMLElement, PROPS) {
     const layer = e.detail.leafletObject;
     const name = el.getAttribute('name');
     if (!name || !layer) return;
-    const base = el.getAttribute('slot') === 'base';
+    const base = el.getAttribute('type') === 'base';
     const checked = el.hasAttribute('checked');
     if (base) this.#obj!.addBaseLayer(layer, name);
     else this.#obj!.addOverlay(layer, name);