Comments (4)
In case it's not immediately clear: the multiple example uses the html
template tag in each class's render function, the single v1 example only uses it at the end of the inheritance chain, and the single v2 example only uses it at the final lit-html render call.
from lit.
Good question. The "Multiple" example is the correct way do compose templates. A string without a html
tag is just a string, and would be rendered as text, not HTML (it would render the text "<div></div>"
, not an empty <div>
).
I think this becomes more clear when you have more complex templates with expressions. If you didn't tag them with html
, they'd be strings with embedded values that aren't efficiently updatable.
from lit.
Ah okay, that makes sense. If I'm understanding this correctly, the super.render()
call in the "multiple" example would end up as a value
right? In which case lit-html would detect that it's a TemplateResult
and handle it accordingly (I think).
Thanks for the quick reply :)
from lit.
That's exactly correct :)
You're welcome!
from lit.
Related Issues (20)
- If Class is necesary for Lit ? (i hate OOP) HOT 4
- Legacy browser version compatibility of 'flat' API HOT 3
- [labs/ssr]: fails with expressions inside of `<style>` tag HOT 3
- Typescript Starter Project Not Linting HOT 1
- Context consumer re-renders after being disconnected by parent HOT 3
- perf: remove IE 11 and Safari 9 code
- SignalWatcher still execute the effect after element disconnected HOT 5
- Uncaught TypeError: this._$AL is undefined HOT 1
- [@lit-labs/testing]: SSR hydration only works for the first element in a fixture
- Set id property before layout effect.
- collectResult "result is not iterable" when recursing non-lit custom elements
- allow unescaped JSON in html` templates
- [lit-labs/cli]: Customize Generated Package Name
- Property converter does not work with @lit/react HOT 2
- [lit-html] styleMap is not compatible with a strict style-src content security policy HOT 1
- Initial changed value incorrect when using legacy decorators and a wrapped property
- [all] Use private class fields HOT 1
- Test Cases Fail After Updating from lit-labs/react v1.1.1 to lit-react: Initial Props Undefined
- [@lit-labs/preact-signals] Memory leak if element updates while disconnected HOT 1
- [lit-testing]: ssr fixtures unable to render iterables HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lit.