Stencil: Props reflect: true not updating DOM attribute

Created on 7 Dec 2019 · 14Comments · Source: ionic-team/stencil

Stencil version:

 @stencil/[email protected]

I'm submitting a:
[X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
I'm assigning a property value of my stencil component via:
const myComponent = document.querySelector('my-component');
myComponent.first = 'levi'

My stencil component has: @Prop({reflect:true}) first: string;

The value appears to be assigned correctly in the component and is displayed correctly on the UI. However, the attribute in the DOM is not reflecting the change as I would expect it to.

Expected behavior:
I would expect the attribute 'first' on the DOM to be updated to 'levi'.

Steps to reproduce:
Thinking it was something odd I was doing or a dependency I might have added I went back to the stenciljs docs and used the 'Getting Started' steps: https://stenciljs.com/docs/getting-started

npm init stencil
select the "component" starter.
npm install @stencil/core@latest --save-exact
In the generated my-component.tsx file, update:
@Prop() first: string;
to be
@Prop({reflect:true}) first: string;
In index.html, directly under body end tag add:

<script>
  setTimeout(()=>{
    const myComponent = document.querySelector('my-component');
    myComponent.first = 'levi'
  }, 3000)
</script>

Related code:

import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  /**
   * The first name
   */
  @Prop({reflect:true}) first: string;

  /**
   * The middle name
   */
  @Prop() middle: string;

  /**
   * The last name
   */
  @Prop() last: string;

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }

  render() {
    return <div>Hello, World! I'm {this.getText()}</div>;
  }
}

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>

  <script type="module" src="/build/test-props.esm.js"></script>
  <script nomodule src="/build/test-props.js"></script>

</head>
<body>

  <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

</body>
<script>
  setTimeout(()=>{
    const myComponent = document.querySelector('my-component');
    myComponent.first = 'levi'
  }, 3000)
</script>
</html>

Other information:
I haven't had much luck googling for this particular issue. The documentation I see on stenciljs' site makes it seem like this is pretty simple and should work. It makes me think I'm not doing something right but I'm not sure what it is.
Just for fun I also tried 'reflectToAttr: true' but that didn't seem to help either.
Thank you in advance for any help someone can provide :)

triage

Source

liester

👍7

All 14 comments

I'm still using reflectToAttr because reflect seemed to do nothing for me (and I wasn't sure if it had another purpose)

dgibson666 on 9 Dec 2019

Same issue here. @stencil/core v1.8.2
Using "reflect" not "reflectToAttr" since that is how is defined on the documentation.

bsastregx on 26 Dec 2019

Is there a way I can give some kind of vote to this issue?

bsastregx on 26 Dec 2019

Same issue here. @stencil/core v1.8.3
Using "reflect" not "reflectToAttr" since that is how is defined on the documentation.

dedd1993 on 2 Jan 2020

I am not sure but maybe its related to whats written in the Docs about reactive data. So mutating the Object is not triggering the re-render. Instead it needs to change completely, like so
myComponent = {...myComponent, first: 'levi'}

stanley85 on 7 Jan 2020

👍1

Same issue here. @stencil/core v1.8.4
Using "reflect".

reedycat on 25 Jan 2020

Same issue. Very annoying. stencil @ 1.8.5

Edit: For me, this issue is only present for the top level component and doesn't happen in child components. I have shadow-dom disabled.

starikcetin on 3 Feb 2020

Same issue (versions 1.8.0 - 1.8.5). Works properly in @stencil/core v1.8.7 (using either 'reflect' or 'reflectToAttr')

brian-cruickshank on 5 Feb 2020

👍1

This is strange, I did not change anything, but it began to work.

reedycat on 6 Feb 2020

This is strange, I did not change anything, but it began to work.

Maybe you installed an update due to NPM version ranges.

starikcetin on 9 Feb 2020

I'm still experiencing the issue with 1.8.11.

hnipps on 4 Mar 2020

In case anyone is struggling with this here's my workaround:

@Component({
  tag: "my-component",
  styleUrl: "my-component.css",
  shadow: true
})
export class MyComponent {
  @Prop() myAttr: string;
  @Element() host: HTMLElement;

  updateAttribute(someValue) {
    this.host.setAttribute("my-attr", someValue);
  }

  render() {
    // Whatever JSX...
  }
}

hnipps on 4 Mar 2020

👍1

I have a repo showing this as well: https://github.com/kensodemann/test-property

That repo is using @stencil/[email protected] and it works fine. But if you upgrade @stencil/core to 1.8.9 then the foo property stops being reflected.