Access vaadin-button part in polymer 2 component.

Flow
1

I’m using vaading designer to build a number of re-usable components.

I’m building a dialog layout that needs cancel/OK buttons that can have their labels modified.

(Yes I’m aware of the built in vaadin dialog but I’ve have a no. of special requirements).

The dialog uses the vaadin-button component which is documented as having a number of parts for styling including a ‘label’ part.

I’m trying to work out the correct method for accessing and modifying the label part.

I’m currently using:

 <vaadin-button theme="primary" id="ok">
    OK
  </vaadin-button>
  
  Then
   connectedCallback()
            {
                super.connectedCallback();
                this.$.ok.textContent = "Save";
            }

This code works but it doesn’t seem quite right.

So is there a correct way of doing this?

I was expecting to address the label component directly.

.e.g.

	this.$.ok.label = "Save";
2

Hi!

As can be seen from your code snippet, your <vaadin-button> does not have any kind of label component inside it. It contains a text node, and the proper way to modify a text node is to set the parent’s textContent. So I think your code is just fine.

3

OK, thanks.