lib/leaflet-components
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

refactor: use type="base" instead of slot="base" for control-layers

Browse Source 
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.
This commit is contained in:
Buddy 2026-06-10 07:13:49 -07:00
parent e45162b0be
commit eba6b2e6ad
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demos/layers-control.html
View File

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

4
src/components/leaflet-control-layers.ts
View File

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