问题标签 [hyperhtml]
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 - 将 hyperhtml-element 与 browserify/babelify 捆绑在一起不起作用
也许我做错了什么，但我似乎无法让 hyperhtml-element 与 babel 配合得很好。
如果我从“hyperhtml-element”导入 HyperHTMLElement，那么我会在包中得到原始 es6。如果我从“hyperhtml-element/es5”导入 HyperHTMLElement，那么我会得到 Uncaught TypeError: Super expression must be null or a function
我正在使用@babel/preset-env
在过去的几个月里，我一直在 Electron 应用程序中使用 hyperhtml-element 并且喜欢它。但是现在我试图在网络上使用它，我什至不知道如何捆绑它。近一个月来，我一直在努力完成这项工作。
这是我的gulpfile.js
您可以提供的任何帮助将不胜感激
hyperhtml - 使用 hyperHTML，有没有办法直接绑定到要修改的元素而不是其父元素？
假设我有以下内容：
据我了解，hyperHTML 设置了您绑定到的元素的 innerHTML。如果我不仅要更改#child-two 的innerHTML，而且还要更改其属性而不触及#child-one 和#child-three，那么使用hyperHTML 完成此操作的最佳方法是什么？
有没有办法直接绑定到要修改的元素而不是其父元素？
我知道我可以使用线创建一个新元素，然后完全替换现有元素，但是我将无法继续绑定和仅更新已更改的内容。
javascript - SyntaxError：意外的令牌导入 - 玩笑
嗨，我正在尝试设置 Web 组件骨架项目，hyperhtml并jest在运行测试用例时出现以下错误
针对该问题尝试了 stackoverflow 中所有现有的建议，但没有运气。
下面是我的配置
.babelrc.json
}
jest.config.js
包.json
您可以在以下 repo 中找到代码。 https://github.com/balajiram/webcomponent-elements-app
javascript - HTML Element versus Javascript Template Literals
Mozilla says Web components consist of three main technologies:
-
Mozilla says Web components consist of three main technologies:
Is number 3, "HTML templates", even necessary in light of ECMAscript's Template Literals?
Look at this example I got from James Milner:
Notice how he doesn't use an HTML template, but instead uses an ecmascript template literal to set the innerHTML of the shadowRoot.
After this, he uses querySelector to get internal elements of the shadowRoot and he ultimately adds event listeners to the increment and decrement buttons.
If you were to use a HTML template, instead of an ecmascript template literal, what does this gain you?
Conceptually, I'm struggling to find a situation where I'd prefer an HTML Template Element over an Ecmascript Template Literal.
Please advise.
The template tag is not 'required' for Web Components per se. It probably made more sense when HTML Imports were being pushed, allowing for importing and reusing HTML snippets, but that has since ceased. Here you could have imported a template and reused that.
It's important to note the specifications are designed to be standalone and can be used interdependently of each other also, which makes them versatile. The HTML tag has use cases outside of the realm of Web Components; it's useful because it allows you to define a piece of markup that doesn't render until instantiated via JavaScript later on. Indeed you can use templates without using any of the other specifications (Custom Elements, Shadow DOM etc).
The template tag can certainly be used in conjunction with the other specs. For example, we could have used it in the example shown to arguably make the code less imperative and more markup focused like so:
And then use this later in JavaScript like so:
The downside here is that it would require that the template existed in the DOM prior to the instantiation as it is relying on the #counterTemplate template being there. In some ways this makes the Custom Element less portable, hence why template literal might be more desirable. I haven't tested the performance of both, but my gut tells me that the template would possibly be more performant.
Disclaimer: I wrote the original blog post
Mozilla says Web components consist of three main technologies:
-
Mozilla says Web components consist of three main technologies:
Is number 3, "HTML templates", even necessary in light of ECMAscript's Template Literals?
Look at this example I got from James Milner:
Notice how he doesn't use an HTML template, but instead uses an ecmascript template literal to set the innerHTML of the shadowRoot.
After this, he uses querySelector to get internal elements of the shadowRoot and he ultimately adds event listeners to the increment and decrement buttons.
If you were to use a HTML template, instead of an ecmascript template literal, what does this gain you?
Conceptually, I'm struggling to find a situation where I'd prefer an HTML Template Element over an Ecmascript Template Literal.
Please advise.
The template tag is not 'required' for Web Components per se. It probably made more sense when HTML Imports were being pushed, allowing for importing and reusing HTML snippets, but that has since ceased. Here you could have imported a template and reused that.
It's important to note the specifications are designed to be standalone and can be used interdependently of each other also, which makes them versatile. The HTML tag has use cases outside of the realm of Web Components; it's useful because it allows you to define a piece of markup that doesn't render until instantiated via JavaScript later on. Indeed you can use templates without using any of the other specifications (Custom Elements, Shadow DOM etc).
The template tag can certainly be used in conjunction with the other specs. For example, we could have used it in the example shown to arguably make the code less imperative and more markup focused like so:
And then use this later in JavaScript like so:
The downside here is that it would require that the template existed in the DOM prior to the instantiation as it is relying on the #counterTemplate template being there. In some ways this makes the Custom Element less portable, hence why template literal might be more desirable. I haven't tested the performance of both, but my gut tells me that the template would possibly be more performant.
Disclaimer: I wrote the original blog post
javascript - 如何缩小 Lit-HTML（包括评论）
我决定通过以下方式尝试 lit-html：
我多次（从各种来源）听说 lit-html 的大小只有 2 或 3KB，但仅导入html和渲染导出导致我的 webpack 增长超过 13KB。这比预期的要大得多。
此外，最终的 dist 包中嵌入了 7 次：
这有点过分了。
我认为 webpack 4 应该会自动删除评论。我怎样才能使它与我的所有其他代码紧密地最小化（其中注释被自动删除并且所有内容都被放在一行中）？
如果它太侵入性，我可以不用 lit-html。
hyperhtml - How do you get around Cloned Templates losing Element References?
I noticed that hyperHTML preserves references I make to elements:
Above will produce a page that says:
It is my understanding that hyperHTML ultimately clones an HTML <tempate> element to render the final output. However, don't you typical lose references when cloning an HTML template (like the variable "div" in the example above)?
Therefore, on the initial render, does hyperHTML somehow replace cloned elements with their originals after cloning the HTML template?
Here's how I think it works:
- Create an HTML Template of the original template literal while replacing all interpolations with comments.
- Clone the html template with comments left in.
- Make elements or document fragments out of each interpolation originally recieved
- Replace each comment in the clone with its processed interpolation.
Is this correct?
hyperhtml - hyperHTML for 10,000 Buttons
I created a test page where I'm using hyperHTML to showcase 10,000 buttons. The code is a little large to post onto stackoverflow, but you can view source on this page here to see the code (expect delay after clicking).
hyperHTML is taking more time than expected to complete its work, which makes me think I'm misusing it.
Any suggested optimizations?
Update: It seems I was using an older version of hyperHTML. The current version is blazing fast on this test.
javascript - 如何在 hyperHTML 中动态更改标签
此代码不起作用。
我可以使用 hyperHTML 动态更改标签吗？
css - 材质图标未在 Hyperhtml 中加载
我在 Hyperhtml 组件中使用材质图标。但是即使加载了css，图标也不会加载到浏览器中。显示的是“3d_rotation”而不是图标。
这是我的实现。
所以我怀疑Hyper Html中是否可能不支持材质图标。材料图标 css 显示在检查元素样式中。
谢谢
javascript-objects - 如何在 hyperHTML 中呈现对象
我被要求使用 hyperHTML 创建一个下拉菜单进行练习。我是这个框架的新手，诚然没有在网上找到大量关于 hyperHTML 的材料，但我已经根据我所阅读的内容起草了一个基本模板。问题是当我尝试使用 JSFiddle 运行我的脚本时，它不会从整个 div 内容中返回任何内容。有人能解释为什么会这样吗？
注意：只有当我在选择参数中添加代码时，JSFiddle 才会拒绝呈现 div 内容。