Can't get Lit or components to work - help! #4176
-
|
I am trying to get into Lit and struggling with the basics, apparently. My html (edit: which isn't displayed, if it's code - goshdammit, can't even get that to work properly, even not as code): My lit.js: My result: What am I doing wrong? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 8 replies
-
|
Your result is correct. You should see the paragraph rendered in shadow DOM. More about shadow DOM: https://lit.dev/docs/components/shadow-dom/ |
Beta Was this translation helpful? Give feedback.
-
|
I did, yet still no shadow root |
Beta Was this translation helpful? Give feedback.
-
|
I can see that you received an error in the dev tools console; could you paste the text of the error message here? |
Beta Was this translation helpful? Give feedback.
-
|
I did, my gosh, didn't notice! |
Beta Was this translation helpful? Give feedback.
-
|
No problem There are two main options to solve this error The first is called import maps. You can generate an import map for your page at http://generator.jspm.dev and it will work in production. Another option is called node resolution. You can turn it on by adding |
Beta Was this translation helpful? Give feedback.
-
|
Feeling a bit dumb: Can't open the link you posted. /Edit: I'm dumb, link isn't supposed to be opened, is it? And other than that: |
Beta Was this translation helpful? Give feedback.
-
|
https://generator.jspm.io/#U2VhYGAIzSvJLMlJTWEAACKwkqAOAA Enter Add your script tag and your custom element |
Beta Was this translation helpful? Give feedback.
-
|
It works, you're amazing! Many, many thanks! |
Beta Was this translation helpful? Give feedback.
No problem
There are two main options to solve this error
The first is called import maps. You can generate an import map for your page at http://generator.jspm.dev and it will work in production.
Another option is called node resolution. You can turn it on by adding
--node-resolutionto the wds command. This will only work for the dev server: for production, you'll need to use a bundler like esbuild, rollup, or webpack. Configuration of those bundlers is complex, you should seek support for them in their dedicated channels.