How can i change the shadow root of the customfield component?

Flow
1

Hi All,

I want to change the style within the shadow root of the customfield component.
I want to change the content of the following piece of style. I want to make content an empty string.

:host::before {
  content: "\2003";
  width: 0;
  display: inline-block;
}


How do i go about changing it?

18148366.png
18148369.png

2

Hi. If you only need to you can change ONE custom field, you can do it from outside:

vaadin-custom-field::before {
  display: noe;
}

If you need to change ALL custom fields in your project, use [registerStyles]
(https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript) API.

3

I’m also interested in hearing why you want to change the content to an empty string – is the current content causing some issues for you?

The reason for that character to be there is to ensure proper vertical alignment of the custom field with other fields, if you have multiple fields on the same line.

4

Jouni Koivuviita:
I’m also interested in hearing why you want to change the content to an empty string – is the current content causing some issues for you?

The reason for that character to be there is to ensure proper vertical alignment of the custom field with other fields, if you have multiple fields on the same line.

Hi Jouni,

It seems customfield has issues with setting the width. After digging in the css i saw, in my case, the change i need to do is to set the content to an empty string. In the image below I have highlighted the custom fields. The one on the right is the current situation in which the custom field does not want to expand. The one on the left has expanded but the content part is causing the entire field to shift down.

When i remove or set the content to an empty string, the layout becomes that which i wanted.

Content removed or made empty

18148950.png
18148953.png

5

Serhii Kulykov:
Hi. If you only need to you can change ONE custom field, you can do it from outside:

vaadin-custom-field::before {
  display: noe;
}

If you need to change ALL custom fields in your project, use [registerStyles]
(https://github.com/vaadin/vaadin-themable-mixin#styling-in-javascript) API.

This works for me.