Question/enhancement: easier way to customize form styling

[MarcinKoziukBC]

Hello! First of all thank you for this project, we think it's real valuable and enjoyed using it so far.

We would like to adapt the visual styling of the form, so it better matches the rest of our application (think of a look and feel similar to shadcn or Mantine). This is important for our users.

So far we're finding that hard to achieve, from what I can tell:

• To implement a theme fully, it requires not just rendering but also replicating a substantial amount of logic
• The default theme relies heavily on Rokit components, which come with their own built-in styling. Is there an approach to theme or style these components?
• Because the UI is built using Web Components, applying global CSS styles doesn't seem feasible (Shadow DOM)
• Some UI elements (clear buttons, add buttons) appear to be hard-coded

What we're essentially looking for is a way to override the styling of inputs and buttons without having to reimplement behaviour.

Are there any plans or ideas to make styling and theming easier or more customizable in the future? Or are we perhaps overlooking something obvious? 🙂

Thanks in advance for your reply!

[s-tittel]

Hi, thanks for the feedback and for reporting! I totally agree that custom theming/styling currently is hard to achieve: theming was considered from the start of this project, but never really was fully implemented due to other requirements having higher priority.

First of all: please check v3.0.0, it now has a configuration option data-use-shadow-root -> when this is set to false, shacl-form renders into light DOM which should ease applying CSS rules.

Regarding the RO-kit components: the reason we use them is because we needed the ability to render hierarchical drop-down lists (as in the demo) and I couldn't find a proper widget (so I started developing it myself). They should export (all?) of the relevant sub elements as parts, so you should be able to style them using CSS part selector.

As separating the application logic from pure rendering isn't exactly trivial (and since every widget library has its own API style/way of customization), I probably won't find time in the near future to implement fully exchangeable UI widgets. PR welcome :-)

[s-tittel]

@MarcinKoziukBC : Just a note, I just released v3.0.1 that now exports the relevant parts and expanded the documentation on theming.

[claudius108]

In case of custom editors / viewer, maybe a mechanism of defining them, like it is mentioned in [1], would help (for default editors / viewers, nothing has to be added, of course):

dash:editor ex:CustomEditor ;
dash:editor <iri-to-custom-editor> ;

dash:viewer ex:CustomViewer ;
dash:viewer <iri-to-custom-viewer> ;

That IRI should point to a full description of the editor / viewer as web component.

Such a mechanism would provide us the total liberty to use this wonderful tool how we want... I guess so... :)

[1] https://www.datashapes.org/forms.html

[MarcinKoziukBC]

@MarcinKoziukBC : Just a note, I just released v3.0.1 that now exports the relevant parts and expanded the documentation on theming.

Late reply, but a colleague of mine has already been using this. Thanks for the enhancement!