V14.5.x - API Element.setAttribute("href", "value") not working

Versions:

- Vaadin / Flow version: 14.5.4
- Java version: 11
- OS version: Windows
- Browser version (if applicable): Chrome
- Application Server (if applicable): Tomcat 9.45

The Java API: Element.setAttribute("href", "https://vaadin.com/") is not working. The URL still remain the previous setting “https://github.com/”

Below is html on view setting (.js)

<div >
	<a id="mylink" href="https://github.com/" target="_self" ></a>
</div>

[denis-anisimov]

With these steps to reproduce and the expected result I can say: the expected result is wrong.

to get the expected result the code mylink.setProperty("href", "https://vaadin.com/"); must be used. You can do exactly the same via the Chrome inspector: select the element and call for it $0.setAttribute("href", "https://vaadin.com/"); Nothing will be changed in the DOM. But if you set a property $0.setProperty("href", "https://vaadin.com/"); then you will get what you expect.

The attributes are not the same as properties, please read e.g. this: https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html?answertab=active#tab-top

[denis-anisimov]

It’s very important to provide at least this information in every ticket report:

• steps to reproduce (which anyone can use)
• expected result
• actual result

This is a perfect example why it’s so important:

steps to reproduce: StaffCompanyView.js code snippet contains a lot of irrelevant information . There a lot of imports (they are not related to the issue) there is sharedStyles import whose content is not known from the report and what’s worse it’s used in the body of the template. So it’s impossible to say whether it matters or not.

There is no expected result ( even though it’s kind of implicit : negation of real result)

The actual result is not clear : there is only a DOM snippet.

Since a lot of things are missed I have to make my own steps to reproduce to guess what the issue in fact is:

• take starter https://github.com/vaadin/skeleton-starter-flow
• Use this code instead of MainView :

@Route("")
@Tag("my-some")
@JsModule("./src/some.js")
public class MainView extends PolymerTemplate<TemplateModel> {

    @Id("mylink")
    private Element mylink;

    public MainView() {
        mylink.setAttribute("href", "https://vaadin.com/");
    }
}

• use this template as some.js

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

class Some extends PolymerElement {
  static get is() {
    return 'my-some';
  }

  static get template() {
    return html`
        <div class="div-staff-info-link">
            <a id="mylink" href="https://github.com/" target="_self" class="staff-info-label-link"></a>
        </div>
    `;
  }
}
customElements.define(Some.is, Some);

The expected result: the DOM snippet looks this way:

<div class="div-staff-info-link">
            <a id="mylink" href="https://vaadin.com/" target="_self" class="staff-info-label-link"></a>
        </div>

The actual result : the DOM snippet looks this way:

<div class="div-staff-info-link">
            <a id="mylink" href="https://github.com/" target="_self" class="staff-info-label-link"></a>
        </div>