Add CSSWidgetWrapper

[feanor12]

This widget wraps an existing widget to add CSS styles via JavaScript.

Features:

• Redirect the value to a wrapper div element
• Add widget.style lines based on the provided dictionary

Example:

@bind text CSSWidgetWrapper(TextField(default="hi"),
	Dict("backgroundColor"=>"green","color"=>"white"))

[fonsp]

Thanks! The input event bubbles upwards, so you might not need to fire it again a second time. Can you remove that line and see if it still works?

[fonsp]

The docs are unclear, the current description explains implementation details, but it doesn't actually say what the CSSWidgetWrapper does.

Can you follow the formatting conventions used here? Use Markdown syntax 👍 https://docs.julialang.org/en/v1/manual/documentation/

[fonsp]

I think you might be able to achieve this without needing to create a wrapper element (which could affect layout styles), by generating code like this:

$widget

<script>
const widget = currentScript.previousElementSibling

</script>

[feanor12]

Thank you for the input. Using the first child of the bond and removing the wrapping div makes it a lot easier. Also I removed the doc strings from the show and get method and modified the one on the struct.

I also realized I could make more general one for a general JavaScript injection. This could then be used for the construction of style elements from a Dict. https://github.com/feanor12/PlutoUI.jl/blob/jsinject/src/CSSWidgetWrapper.jl Do you think this would be useful?