- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在开发一个使用 LitElement 组件的应用程序。我想将 Leaflet 集成到其中,但在显示 map 时遇到问题。我已经使用 npm 在我的项目中安装了 Leaflet,并创建了一个如下所示的类。
import {LitElement, html, css} from 'lit-element';
import './node_modules/leaflet/dist/leaflet';
class Map extends LitElement{
static get styles() {
return [css``];
}
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
let map = L.map('mapid').setView([51.505, -0.09], 13);
let urlTemplate = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}));
}
render() {
return html`
<link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css">
<div id="mapid" style="height: 100%"></div>
`;
}
}
customElements.define("my-map", Map);
运行我的应用程序会导致以下错误:未捕获类型错误:无法设置未定义的属性“L”。我对如何使用 Leaflet 在 LitElement 应用程序中显示 map 有点迷失,并且非常感谢您插入我走向正确的方向。
最佳答案
对于 Lit 项目,我们倾向于建议人们坚持使用 es-module 导入(尽管这是可选的)。因此,而不是从导入
import './node_modules/leaflet/dist/leaflet';
尝试:
import {map as createMap, tileLayer} from './node_modules/leaflet/dist/leaflet-src.esm.js';
这是因为它通常更适合 Web 组件的模块化特性,并且 bundler 可以比调用 window.L
更有效地优化 es 模块
接下来,重写此语法的传单调用。例如
let map = L.map('mapid').setView([51.505, -0.09], 13);
// should be
let map = createMap('mapid').setView([51.505, -0.09], 13);
// and
map.addLayer(L.tileLayer(urlTemplate, {minZoom: 4}))
// should be
map.addLayer(tileLayer(urlTemplate, {minZoom: 4}))
接下来,需要全局 ID 才能运行的库在使用影子 DOM 作为影子根范围 DOM 并因此查询其根的 Web 组件中往往会出现问题。不过,幸运的是,leaflet's documentation表明我们可以向它传递一个元素引用而不仅仅是一个 id。这意味着我们需要像这样获取元素引用:
const mapEl = this.shadowRoot.querySelector('#mapid');
然后我们可以将其传递给 createMap
函数
const mapEl = this.shadowRoot.querySelector('#mapid');
let map = createMap(mapEl).setView([51.505, -0.09], 13);
最后我们会发现我们遇到了 mapEl
为 null
的问题。这是因为 LitElement 在 firstUpdated
lifecycle callback 之前不会渲染其内容。 。这意味着我们必须将 map 创建的位置从 connectedCallback
更改为 firstUpdated
。
这是代码的工作示例,其中我还添加了一些样式来为自定义元素提供一定的高度:https://jsbin.com/fumusodake/edit?html,output
关于javascript - LitElement 中的传单用法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66600326/
我有一个代表多个文件的文件上传的 LitElement。 这使用代表每个文件的子组件。 我正在努力寻找使用 LitElements 将更改传播到子组件的最佳实践示例,因为它似乎与 Polymer 3
如何在 Lit-Element 中找到 HTML 元素的宽度,我无法找到如何使用 @query import { LitElement, html, query } from 'lit-element
我目前正在开发一个使用 LitElement 组件的应用程序。我想将 Leaflet 集成到其中,但在显示 map 时遇到问题。我已经使用 npm 在我的项目中安装了 Leaflet,并创建了一个如下
我正在为限制列表的 DOM 数量的 LitElement 无限滚动条创建 POC。该组件基于以下组件:https://medium.com/walmartglobaltech/infinite-scr
我正在使用 litelement 构建网站导航。它将有一个下拉菜单。我试图弄清楚如何添加事件,以便如果用户单击下拉菜单本身之外的任何位置,甚至单击自定义元素之外的任何位置,下拉菜单将关闭。我认为这是自
当页面首次加载时,下面代码生成的删除按钮按预期工作。但是,如果您更改其中一个 中的文本元素,删除按钮不再正常工作。我该如何解决这个问题? import { LitElement, html } fr
我有一个简单的 list ,每个项目都有一个删除按钮。当我选中第一个项目然后将其删除时,列表会更新,删除该项目,但会选中下一个项目的复选框。下一项的属性是正确的。 这是我的代码: import { L
我正在遵循 LitElement 指南 here但似乎无法根据它的属性计算我的自定义元素的样式值。 我希望我的元素以下列方式之一编写: 我想根据是否设置了 dardmode 属性来设置元素的背景和
我不知道如何观察 LitElement 中的属性变化。 我一直在尝试这些方法,但我无法让这些工作: static get properties() { return { tem
我试图简单地将它加载到我呈现的 HTML 中,但这不起作用。 当前代码: render() { return html ``; } 最佳答案 从聚合物松弛 channel 获得了解决方案(归功
我有一个问题,我需要在 CSS 样式加载到我的组件中后处理事件。我试图使用 lit-element 生命周期,但它们仍然被提前解雇。 我正在尝试获取 DOM 元素的起始位置和其他数据,但我得到了一个初
我有一个简单的例子来展示我所看到的:https://stackblitz.com/edit/lit-element-example-3pdnwk?file=index.js . 基本上,当第一个子元素
我用 LitElement 创建了一个自定义选择组件: import { LitElement, html } from 'lit-element'; class CustomSelect exten
我正在使用 LitElement 并且我正在尝试在元素级别加载 google-font。 我试过在 connectedCallback 中的 HTML 文字中返回它事件,但它不起作用。 我无法在 ge
Web 组件的目的是将所有 HTML/CSS/JS 封装在一个地方,但我必须使用通用的 SCSS 文件,它有很多变量,例如颜色、字体大小和很多其他东西。这是一个设计系统,它总是在变化。有没有插件或方法
我有以下代码: export class ViTextfield extends LitElement { static get properties() { return {
我想做一个下拉菜单,当点击输入时,菜单会显示一个切换开关,可以移除或放置“隐藏”类 我有这个方法 toggleMenu() { this.classList.toggle("hidden");
Polymer 3 和 LitElement 看起来对 future 基于组件的开发非常有吸引力,我期待在我的项目中使用它们。 但这里的绊脚石之一是旧的 Polymer 代码库有很多现成的元素,似乎与
我正在尝试在我的 React 项目中使用 lit-element 组件,我想将回调函数传递给 React 中的 lit-element 组件,但没有成功。 我尝试了几种不同的方法,例如更改属性类型,以
我正在尝试将 Lit-Element 与由 SVG 元素包裹的单个槽一起使用。 但似乎 位于 不接受渲染给定的 SVG 元素。 什么在自定义组件中不起作用: render() { return h
我是一名优秀的程序员,十分优秀!