How do I use web awesome inside of Lit (Typescript) components? #56
-
|
I'm a backend dev, so perhaps I'm just being completely stupid, but the webawesome components that are inside of my Lit components are not rendering. Do I need to add some extra hook to force the render? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
Do you have a sandbox we can look at? |
Beta Was this translation helpful? Give feedback.
-
|
Ok, managed to craft this minimal example. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks. By design, the autoloader doesn't load components within a custom element's shadow root. If you're shipping components as a library, I strongly recommend importing component dependencies manually. Manually importing componentsTry adding this to your component, for example. (You can find copy/paste imports for each component at the bottom of each page in the docs.) import 'https://early.webawesome.com/[email protected]/dist/components/input/input.js';You'll probably want to load styles from the default theme, as well. Those can be found here: Using the autloader in a custom elementIf you really want to use the autoloader inside your custom element — e.g. you're not shipping a library, but building an app — you can use the autoloader's import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import { discover } from 'https://early.webawesome.com/[email protected]/dist/webawesome.loader.js';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
static styles = css`p { color: blue }`;
firstUpdated() {
discover(this.shadowRoot);
}
render() {
return html`
<p>This renders</p><form> <wa-input label="User"></wa-input><wa-button>LogIn</wa-button></form>
`;
}
}This will register the components in your shadow root after the component connects.
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks that works. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem, but the above setup isn't working. I get the following 404s when the discover() method attempts to autoload the components if finds: GET https://early.webawesome.com/components/icon/icon.js net::ERR_ABORTED 404 (Not Found)
GET https://early.webawesome.com/components/button/button.js net::ERR_ABORTED 404 (Not Found)
GET https://early.webawesome.com/components/dialog/dialog.js net::ERR_ABORTED 404 (Not Found)These are my HTML includes: <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/themes/default.css" />
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="https://early.webawesome.com/[email protected]/dist/webawesome.loader.js"></script>
<script type="module" src="/src/my-app.js"></script>
</head>And here is the MyApp component: import { discover } from 'https://early.webawesome.com/[email protected]/dist/webawesome.loader.js';
import { UseStates } from './utils/state';
export class Web5App extends LitElement {
constructor() {
super()
}
firstUpdated() {
discover(this.shadowRoot);
} |
Beta Was this translation helpful? Give feedback.
-
|
Are you using a bundler by chance? I can't seem to reproduce it in Codepen. |
Beta Was this translation helpful? Give feedback.
-
|
@KonnorRogers yes, it's VitePWA, plain JS Lit |
Beta Was this translation helpful? Give feedback.
-
|
🤔 I can't seem to recreate your issue: |
Beta Was this translation helpful? Give feedback.
-
|
Note that I am not using TS, this is just a regular JS app with Lit 3. |
Beta Was this translation helpful? Give feedback.
Thanks. By design, the autoloader doesn't load components within a custom element's shadow root. If you're shipping components as a library, I strongly recommend importing component dependencies manually.
Manually importing components
Try adding this to your component, for example. (You can find copy/paste imports for each component at the bottom of each page in the docs.)
You'll probably want to load styles from the default theme, as well. Those can be found here:
Using the autloader in a custom element
If you really…