问题标签 [lit-html]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
610 浏览

javascript - Polymer 3:文本到 HTML

在我的 Polymer 页面中,我从变量中的 db 获取文本,该文本包含 HTML 标记。如何将此文本更改为 HTML 格式?我得到的文字如下所示:

我将它显示在我的页面中,如下所示,其中item.content有上述文本:

0 投票
1 回答
253 浏览

javascript - Meteor + LitElement (Polymer 3) 导入问题

我在将 LitElement 模块导入 Meteor 项目时遇到问题:

我正在使用 Meteor 1.7+ 开始一个新的测试项目,并且正在将 LitElement 用于一些组件。

我像这样安装了 Meteor:

我是这样安装的:

我的 node_modules 目录如下所示:

图片

我的 package.json 文件:

我看到导入的 lit-element 的典型方式不起作用......

只需添加一个 index.js 文件并导入 lit-element 模块就会产生错误。如果我从 index.js 文件中删除导入,错误就会消失。

第一个错误:

指向此位置:

图片

展开 node_modules 以查看此文件:

图片

为什么我会收到意外的 { 令牌?


注意:我在这里问这个问题,以防万一 Meteor 用户遇到同样的问题并需要帮助。

0 投票
3 回答
557 浏览

javascript - 如何在 polymer3 的模板中嵌入 html 代码(如 unsafeHTML)

请检查 plunker

我想像partHtml普通 HTML 一样被注入到模板中。

我知道 lit-element 中的不安全 HTML 可以做到这一点,但是 lit-element 不能使用super.render()东西,它不像聚合物元素那样方便。

0 投票
2 回答
5341 浏览

lit-html - 使用 lit-html 时如何指定事件处理程序?

[Writing Templates] 下的主要文档提供了以下用于绑定事件处理程序的示例lit-html

添加这个带有默认值renderhtml导入函数并调用渲染的简单页面,但似乎没有渲染按钮。如果删除@click事件绑定,则呈现按钮。图书馆中一定有我遗漏的东西或严重的错误。

版本:0.10.2

下面的链接与事件处理程序绑定的工作方式有关lit-html

0 投票
1 回答
1072 浏览

polymer - 点燃元素:未捕获(承诺中)类型错误:无法读取 null 的属性“previousSibling”

在迁移到lit-element版本时0.6.0。如果我使用

header我的文件的一部分。我有以下错误:

我无法追踪这个错误来自哪里,因为错误堆栈很大并且涉及很多异步调用。我还尝试重现一个最小的示例,但同样,我无法模拟相同的错误消息。此错误的后果是完全无法加载某些自定义元素(以至于应用程序无法使用)。

现在,如果我用这个更改标题脚本:

错误消失了。但现在控制台中出现以下警告消息:

检测到不兼容的 ShadyCSS 版本。(shady-render.ts:42)

请至少更新到@webcomponents/webcomponentsjs@2.0.2 和@webcomponents/shadycss@1.3.1。

这是一个有趣的消息,因为我的项目已经在使用webcomponentsjs版本2.1.2shadycss版本1.5.2。除了这个警告消息之外,css 指令@apply被完全忽略,导致接口不使用任何flex属性(我让你想象一下混乱)。

现在这是一种我真的无法理解的行为,即使我花了整整一个下午的时间来研究文档和东西。我召唤你的帮助。

0 投票
1 回答
227 浏览

javascript - 处理 JavaScript 中的类方法名称冲突

tl;博士:

我的类的方法名称与它扩展的类的同名冲突。我可以重命名我的班级,但我更喜欢不需要重大更改的解决方案。

背景

我发布了一个名为 的库lit-apollo,它导出classLitElement. 用户应该使用我的类定义自己的customElements元素,然后这些元素可以使用 apollo graphql 获取数据,并使用 lit-html 进行渲染。有关简单示例,请参阅README

问题

LitElement 的最新版本公开了一个名为 的实例方法update,它的实现可以选择性地覆盖以控制元素呈现的方式和时间。我的库还有一个update属性,它对应于updateApollo 突变构造函数的选项

这两种方法,显然是矛盾的。

问题

我知道我可以发布一个重大更改lit-apollo,将它自己的update方法重命名为onUpdate或类似的方法,但是我如何在不破坏我的类的 API 并因此需要主要版本的情况下解决这个问题?

我虽然检查第一个参数以查看它是否是 ApolloCache 的实例,然后super.update根据需要将 args 路由到,但我认为这会破坏 LitElement 合同,阻止用户实现他们自己的 LitElement 版本update

你会如何处理这种情况?

0 投票
2 回答
519 浏览

polymer - 如何在聚合物 3 组件中实现 lit-html 而不是 juicy-html?

我正在将应用程序从聚合物 1 转换为聚合物 3。我使用了 juicy-html,但它们尚未更新到 Polymer 3,我看到有 lit-html。我想知道如何将此代码段更改为使用 lit-html。它用于扩展字符串,例如:'Hello <span class="highlight">world</span>!'

这是我的聚合物 1 组件中的代码片段。

我需要为内部 div 实现一个新组件吗?有没有我可以看的例子?

这是生成的 Polymer 3 元素,用于在字符串中显示突出显示的文本:

从'@polymer/lit-element/lit-element.js'导入{html,LitElement};

0 投票
1 回答
2315 浏览

polymer - Lit-Element 不允许我在 html 中设置属性值

我对我正在处理的特定元素有疑问。由于某种原因,这个不允许我在 html 标记上指定任何属性值。

如果我在构造函数中指定默认值,那么该元素可以与这些默认值一起正常工作,但我无法通过声明性 html 覆盖默认值。

这是元素:

我尝试像这样使用上面的元素:<ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>.

我期望元素中的 xhrTriggers 属性应该是#somethingElse,但事实并非如此。它基本上只是使用构造函数的默认值。

0 投票
1 回答
140 浏览

node.js - 我不能从节点网站导入点亮的 HTML

嗨,我正在尝试学习节点的一个小项目,我有一个节点获取请求,女巫读取主页 HTML 文件然后发送它,

在 HTML 站点上,我有一个脚本标签(类型 = 模块),并且在脚本的最开始,我正在导入 lit-HTML 模块,但它会将整个脚本标签缝合起来,我该如何修复它?节点代码:

这是在 index.html 里面

这是在节点

休息;

这是在 index.html 里面

0 投票
0 回答
7326 浏览

polymer - 有没有办法使用 es6 模块将 html 模板导入 javascript?

关于这个主题似乎有很多过时的问题,我找不到最近的问题(2018 年)。其他问题也只是集中在让它工作上,我专注于沿着 ES6 模块关于 HTML 导入的路径进行这项工作的正确前进道路。

所有浏览器似乎都同意 html 导入已死

如果这是真的,是否有导入html的好方法

在 JavaScript 中使用?

我在这里找到了这个技巧 -创建和使用自定义 HTML 组件?,但它依赖于 JavaScript 文件中的 HTML 作为字符串。

在我的完美世界中,我可以定义一个 HTML 文件 template.html(所以我得到了漂亮的编辑器颜色编码),但能够导入它以在我的 dom 中使用。

我知道有像 lit-html 这样的库可以让这很容易,但似乎因为 ES6 模块现在是标准的,并且由于 html 导入已被弃用以代替 ES6 模块,所以应该有一些简单的本地方法来做到这一点?