Replace the brief 'Other components' section with complete per-component
attribute tables including defaults and descriptions. Add CSS/resize docs
for leaflet-map and a shared path-style reference table.
All `leaflet-map` properties are two-way: reading returns the live map value; writing updates both the attribute and the map.
All `leaflet-map` properties are two-way: reading returns the live map value; writing updates both the attribute and the map.
### CSS
Leaflet's stylesheet is loaded from a CDN via a `<link>` in the shadow DOM. Marker icon paths are derived from the CSS URL automatically.
| Attribute | Default | Description |
|---|---|---|
| `css-url` | `https://unpkg.com/leaflet@1.9.4/dist/leaflet.css` | URL for Leaflet CSS |
| `css-integrity` | `sha256-...` | SRI hash (required with default URL; when `css-url` is custom, no default integrity is used unless explicitly set) |
| `css-crossorigin` | _(auto)_ | `"anonymous"` when integrity is active, otherwise absent. Set explicitly to override. |
### Resize
A `ResizeObserver` on the host element automatically calls `map.invalidateSize()` whenever the element's dimensions change — from CSS classes, inline styles, attribute changes, or parent layout.
Coordinates are taken from child `<leaflet-line>` elements, not from attributes. All [path style](#path-style) attributes apply (excluding `fill*` — polylines don't fill).
| `class-name` | `''` | CSS class for the SVG element |
### `<leaflet-layer-group>`
Passthrough container. No attributes. Accepts layers, popups, and tooltips as children.
### `<leaflet-feature-group>`
Passthrough container with Leaflet's `FeatureGroup` (supports `getBounds()`, style propagation, etc.). No attributes. Accepts layers, popups, and tooltips as children.
### `<leaflet-geojson>`
All [path style](#path-style) attributes apply.
| Attribute | Default | Description |
|---|---|---|
| `data` | `''` | GeoJSON string |
| `stroke` | `''` | Stroke color (overrides `color`) |
| `line-cap` | `'round'` | Line cap style |
| `line-join` | `'round'` | Line join style |
| `dash-array` | `''` | Dash pattern |
| `dash-offset` | `''` | Dash offset |
| `fill-rule` | `'evenodd'` | Fill rule |
### `<leaflet-popup>`
Content comes from `innerHTML`, not an attribute. Mutations to innerHTML sync automatically via a `MutationObserver`.
| Attribute | Default | Description |
|---|---|---|
| `lat` | `0` | Latitude (omit to auto-attach to the parent layer's position) |
| `position` | `'bottomright'` | Corner position |
| `prefix` | `''` | Text before the attribution |
### `<leaflet-control-scale>`
| Attribute | Default | Description |
|---|---|---|
| `position` | `'bottomleft'` | Corner position |
| `max-width` | `100` | Maximum width of the scale (px) |
| `metric` | — | Show metric scale (m/km) |
| `imperial` | — | Show imperial scale (mi/ft) |
| `update-when-idle` | — | Update only when the map stops moving |
## Path style
The following attributes apply to `<leaflet-circle>`, `<leaflet-circle-marker>`, `<leaflet-polyline>`, `<leaflet-polygon>`, `<leaflet-rectangle>`, and `<leaflet-geojson>`.
Buddy
4 months ago