lit/lit-element

Strange display of a leaflet map when shadowDom is enabled.

lolive opened this issue · 1 comments

lolive commented

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

  • Chrome
  • Firefox
  • Edge
  • Safari 11
  • Safari 10
  • IE 11

Versions

  • lit-element: v2.4.0
  • webcomponents: v2.5.0
lolive commented

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]