question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Svelte: where to set customElement attribute

See original GitHub issue

Describe the bug The current svelte generator doesn’t provide a clear way to perform a build using the customElement flag set to true.

nx run web-components:build performs a build, but doesn’t take into account the <svelte:options tag="my-wc" /> to output a compiled web component. I have tried passing a close equiv to my previous working rollup.config.js file to the –configFile` param, but that seems to result in typescript issues shown below.

file: /home/chris/Projects/Work/ui-components/libs/web-components/src/AppHeader.wc.svelte:21:1
 19 |  
 20 |  function create_fragment(ctx) {
 21 |    let goa_page_block;
         ^
 22 |    let div1;
 23 |    let a;
/home/chris/Projects/Work/ui-components/libs/web-components/src/AppHeader.wc.svelte:21:1 The keyword 'let' is reserved

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
chrisolsencommented, Dec 23, 2021

@Jordan-Hall If I set the configFile attribute within the workspace.json file and run npx nx build web-components it is unable to resolve the path name. Is this what you meant?

> error: Could not resolve "/home/chris/Projects/Work/ui-components/vite.config.ts"
1reaction
DominikPiepercommented, Dec 23, 2021

I’ll take a look later but tbh I never tried the custom element option with svelte

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using Custom Elements in Svelte | CSS-Tricks
Svelte uses a simple heuristic to determine whether to pass data to a custom element as a property or an attribute. If a...
Read more >
Setting property vs attribute (Svelte + custom elements ...
this means that any changes to the custom element won't be picked up without saving and refreshing the REPL. 4. const oldRegister =...
Read more >
How do you use element attributes with Svelte when ...
I am trying to create a custom checkbox using ...
Read more >
Unable to define some attributes on Custom Elements #3919
Actually Svelte won't define any attribute if there is a property with the exact name. Instead it will try to assign the value...
Read more >
How to run Svelte custom elements in dev mode - Nuclia
define ; customElements.define = function (name, CustomElement, options) { // we create a wrapper to prefix/unprefix attributes with `data-` // ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found