问题标签 [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.
javascript - Polymer 3:文本到 HTML
在我的 Polymer 页面中,我从变量中的 db 获取文本,该文本包含 HTML 标记。如何将此文本更改为 HTML 格式?我得到的文字如下所示:
我将它显示在我的页面中,如下所示,其中item.content
有上述文本:
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 用户遇到同样的问题并需要帮助。
javascript - 如何在 polymer3 的模板中嵌入 html 代码(如 unsafeHTML)
我想像partHtml
普通 HTML 一样被注入到模板中。
我知道 lit-element 中的不安全 HTML 可以做到这一点,但是 lit-element 不能使用super.render()
东西,它不像聚合物元素那样方便。
lit-html - 使用 lit-html 时如何指定事件处理程序?
[Writing Templates] 下的主要文档提供了以下用于绑定事件处理程序的示例lit-html
。
添加这个带有默认值render
和html
导入函数并调用渲染的简单页面,但似乎没有渲染按钮。如果删除@click
事件绑定,则呈现按钮。图书馆中一定有我遗漏的东西或严重的错误。
版本:0.10.2
下面的链接与事件处理程序绑定的工作方式有关lit-html
:
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.2
和shadycss
版本1.5.2
。除了这个警告消息之外,css 指令@apply
被完全忽略,导致接口不使用任何flex
属性(我让你想象一下混乱)。
现在这是一种我真的无法理解的行为,即使我花了整整一个下午的时间来研究文档和东西。我召唤你的帮助。
javascript - 处理 JavaScript 中的类方法名称冲突
tl;博士:
我的类的方法名称与它扩展的类的同名冲突。我可以重命名我的班级,但我更喜欢不需要重大更改的解决方案。
背景
我发布了一个名为 的库lit-apollo
,它导出class
从LitElement
. 用户应该使用我的类定义自己的customElements
元素,然后这些元素可以使用 apollo graphql 获取数据,并使用 lit-html 进行渲染。有关简单示例,请参阅README。
问题
LitElement 的最新版本公开了一个名为 的实例方法update
,它的实现可以选择性地覆盖以控制元素呈现的方式和时间。我的库还有一个update
属性,它对应于update
Apollo 突变构造函数的选项。
这两种方法,显然是矛盾的。
问题
我知道我可以发布一个重大更改lit-apollo
,将它自己的update
方法重命名为onUpdate
或类似的方法,但是我如何在不破坏我的类的 API 并因此需要主要版本的情况下解决这个问题?
我虽然检查第一个参数以查看它是否是 ApolloCache 的实例,然后super.update
根据需要将 args 路由到,但我认为这会破坏 LitElement 合同,阻止用户实现他们自己的 LitElement 版本update
你会如何处理这种情况?
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};
polymer - Lit-Element 不允许我在 html 中设置属性值
我对我正在处理的特定元素有疑问。由于某种原因,这个不允许我在 html 标记上指定任何属性值。
如果我在构造函数中指定默认值,那么该元素可以与这些默认值一起正常工作,但我无法通过声明性 html 覆盖默认值。
这是元素:
我尝试像这样使用上面的元素:<ostinato-fetch-triggers xhr-selector="#somethingElse"></ostinato-fetch-triggers>
.
我期望元素中的 xhrTriggers 属性应该是#somethingElse
,但事实并非如此。它基本上只是使用构造函数的默认值。
node.js - 我不能从节点网站导入点亮的 HTML
嗨,我正在尝试学习节点的一个小项目,我有一个节点获取请求,女巫读取主页 HTML 文件然后发送它,
在 HTML 站点上,我有一个脚本标签(类型 = 模块),并且在脚本的最开始,我正在导入 lit-HTML 模块,但它会将整个脚本标签缝合起来,我该如何修复它?节点代码:
这是在 index.html 里面
这是在节点
休息;
这是在 index.html 里面
polymer - 有没有办法使用 es6 模块将 html 模板导入 javascript?
关于这个主题似乎有很多过时的问题,我找不到最近的问题(2018 年)。其他问题也只是集中在让它工作上,我专注于沿着 ES6 模块关于 HTML 导入的路径进行这项工作的正确前进道路。
所有浏览器似乎都同意 html 导入已死
如果这是真的,是否有导入html的好方法
在 JavaScript 中使用?
我在这里找到了这个技巧 -创建和使用自定义 HTML 组件?,但它依赖于 JavaScript 文件中的 HTML 作为字符串。
在我的完美世界中,我可以定义一个 HTML 文件 template.html(所以我得到了漂亮的编辑器颜色编码),但能够导入它以在我的 dom 中使用。
我知道有像 lit-html 这样的库可以让这很容易,但似乎因为 ES6 模块现在是标准的,并且由于 html 导入已被弃用以代替 ES6 模块,所以应该有一些简单的本地方法来做到这一点?