Rendering issue with custom components #38

New issue

Closed

opened 2024-10-07 07:38:06 +00:00 by ildella · 2 comments

ildella commented

2024-10-07 07:38:06 +00:00

(Migrated from github.com)

My custom component has a custom attribute "style" where I pass the classes for the underlying actual html

My custom component has a custom attribute "style" where I pass the classes for the underlying actual html <button> element inside. As you see the "style" values are rendered differently, even an error is reported, but they actually work fine. ![Screenshot from 2024-10-07 09-34-12](https://github.com/user-attachments/assets/48b8ae79-b537-4cb3-9c6e-ae427915e8bd)

corneliusio commented

2024-10-08 14:55:03 +00:00

(Migrated from github.com)

That said, technically style is a native html attribute that is being "misused" in this example. Though frankly it's somewhat moot since there are still cases where you'd want to interpolate component variables into an inline style. That said, you can work around the highlighting by doing something like this:

style={`flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ${chatActionsHidden}`}

At the very least it would get ride of the error highlighting.

@ildella Will dig into this asap. May simply come down to not having CSS source in style attributes, but hopefully I can get a working extension of the base CSS syntax highlighting that works with Svelte's brackets. That said, technically style is a native html attribute that is being "misused" in this example. Though frankly it's somewhat moot since there are still cases where you'd want to interpolate component variables into an inline style. That said, you can work around the highlighting by doing something like this: ``` style={`flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-200 ${chatActionsHidden}`} ``` At the very least it would get ride of the error highlighting.

👍 1

deathaxe commented

2024-11-18 15:03:43 +00:00

(Migrated from github.com)

Supporting plain curly interpolation {...} in CSS might be cumbersome as you can't really distinguish them from normal rule block punctuation. So it is barely possible to distinguish them or decide, whether curlies are part of a selector, property-name or value.

Do components support inline styles? If not, that attribute could be excluded or just use tag-generic-attributes for them.

Supporting plain curly interpolation `{...}` in CSS might be cumbersome as you can't really distinguish them from normal rule block punctuation. So it is barely possible to distinguish them or decide, whether curlies are part of a selector, property-name or value. Do components support inline styles? If not, that attribute could be excluded or just use `tag-generic-attributes` for them.