search

lit / lit-element

LEGACY REPO. This repository is for maintenance of the legacy LitElement library. The LitElement base class is now part of the Lit library, which is developed in the lit monorepo.
https://lit-element.polymer-project.org
BSD 3-Clause "New" or "Revised" License
4.49k stars 318 forks source link

Strange display of a leaflet map when shadowDom is enabled. #1123

Closed lolive closed 3 years ago

lolive commented 3 years ago

Description

Strange display of a leaflet map when shadowDom is enabled.

Live Demo

http://search.datao.net/testMap.html

Steps to Reproduce

The live demo of the bug is as is: two frames are displayed. The left frame contains a leaflet map in a litElement where shadowDom is disabled (i.e overide of createRenderRoot to return "this"). The right frame contains a leaflet map in a litElement with a shadowDom.

Expected Results

Both frames should display a map correctly.

Actual Results

The map on the left frame is displayed correctly. The map on the right frame is disorganized.

Browsers Affected

Versions

lolive commented 3 years ago

Oops, my mistake. I forgot to deal with CSS in my component. Adding <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> to my render() function corrected the problem. Sorry for raising that issue. This IS NOT an issue. [I just need to learn how to deal with CSS boundaries in shadowDOM]