42 questions
0
votes
1
answer
441
views
Can one use an hyperHTML inline-style event handler without violating `script-src-attr: 'none'`
In using hyperHTML to create something like:
this.html`
<input
name="mode"
type="radio"
onclick=${this.handleClick}
/>
`;
...I ...
- 14.4k
2
votes
1
answer
174
views
How to wrap a string with a html tag in hyperHTML through RegEx replace
I'm building a search auto-suggest component where the results are rendered with hyperHTML.
The matching string part of the suggestions returned from the server should be highlighted.
I'm using a ...
- 941
0
votes
1
answer
106
views
How to render objects in hyperHTML
I've been asked to create a dropdown menu using hyperHTML for an exercise. I'm new to this framework and admittedly haven't found a great deal of material on hyperHTML online, but I've drafted a basic ...
- 141
-1
votes
1
answer
194
views
Material Icons are not Loading in Hyperhtml
I am using material Icons inside Hyperhtml Components. But even though css is loaded the Icon in not loading in the browser. Instead of the Icon the "3d_rotation" is showing.
This is My ...
- 414
1
vote
1
answer
154
views
How to change tag dynamically in hyperHTML
This code does not work.
const render = ({title, tag, values}) => {
bind(document.body)`
<h1>${title}</h1>
<div>
<${tag} data=${values}></...
- 937
0
votes
1
answer
377
views
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 ...
- 11.6k
0
votes
1
answer
366
views
How do you get around Cloned Templates losing Element References?
I noticed that hyperHTML preserves references I make to elements:
let div = document.createElement("div");
div.textContent = "Before Update";
hyperHTML.bind(document.body)`static1 - ${div} - static2`;...
- 11.6k
-1
votes
1
answer
2k
views
How to minify Lit-HTML (including comments)
I decided to try out lit-html via:
npm install lit-html --save
I've heard numerous times (from various sources) that lit-html is only 2 or 3KB in size, but by only importing the html and render ...
- 11.6k
8
votes
1
answer
4k
views
HTML <template> Element versus Javascript Template Literals
Mozilla says Web components consist of three main technologies:
Custom elements
Shadow DOM
HTML templates
Is number 3, "HTML templates", even necessary in light of ECMAscript's Template Literals?
...
- 11.6k
0
votes
1
answer
1k
views
SyntaxError: Unexpected token import - Jest
Hi I am trying setup web components skeleton project with hyperhtml and jest and getting following error while running test cases
import {Component, bind, define, hyper, wire} from 'hyperhtml/esm';
...
- 188
0
votes
1
answer
200
views
Using hyperHTML, is there a way to bind directly to an element to be modified rather than its parent?
Assuming I have the following:
<div id="parent">
<div id="child-one"><p>Child One</p></div>
<div id="child-two"><p>Child Two</p></div>
<...
- 27
0
votes
1
answer
102
views
Bundling hyperhtml-element with browserify/babelify not working
Maybe I'm doing something very wrong but I can't seem to get hyperhtml-element to play nice with babel.
If I import HyperHTMLElement from 'hyperhtml-element' then I get raw es6 in my bundle.
If I ...
- 2,306
1
vote
1
answer
301
views
Server Side Rendering with viperHTML
I'm working on a Symfony application and just got SSR for JS working using https://github.com/spatie/server-side-rendering. So far I only worked with "readymade" SSR solutions for React, but currently ...
- 605
0
votes
1
answer
159
views
Detect when component is un/attached to the DOM
I'm moving from React to hyperHTML because performance matters. I'm using third-party libraries specifically for dock panel management from PhosphorJS. When I create this 'DockPanel' class I need to ...
- 3
2
votes
1
answer
498
views
HyperHTML performance when re-ordering DOM Nodes
I'm trying to understand HyperHTML and how to get the best performance out of it.
Reading about how it works under the hood, it seems to imply that strong connections are made between a template and ...
- 11.8k
