ember sets value as a property

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    console.log('connectedCallback of custom element');
    console.log('this.hasAttribute("foo")', this.hasAttribute('foo'));
    console.log('this.getAttribute("foo")', this.getAttribute('foo')); 
  }
  
  attributeChangedCallback() {
    console.log('attributeChangedCallback of custom element');
    console.log('this.hasAttribute("foo")', this.hasAttribute('foo'));
    console.log('this.getAttribute("foo")', this.getAttribute('foo'));
  }
  
  disconnectedCallback() {
    console.log('disconnectedCallback of custom element');
  }
  
  get foo() {
    // Glimmer VM will set 'foo' as a property and not as an attribute
    // if this property exists
  }
  
  static get observedAttributes() {
    return ['foo'];
  }
}

export default class ApplicationController extends Controller {
  @tracked value = 'bar';

  constructor() {
    super(...arguments);
    
    customElements.define('my-custom-element', MyCustomElement);
  }

  @action
  changeValue() {
    this.value = this.value === 'bar' ? 'baz' : 'bar';
  }
}

helpers.create-element-cached\.js

import Helper from '@ember/component/helper';

export default class extends Helper {
  element = null;

  compute([tagName], attributes) {  
    if (this.element === null) {
      this.element = document.createElement(tagName);
    }
    
    let { element } = this;

    for (let attr in attributes) {
      let value = attributes[attr];
      element.setAttribute(attr, value);
    }

    return element;
  }
}

helpers.create-element\.js

import { helper } from '@ember/component/helper';

export default helper(function myHelper([tagName], attributes) {
  let el = document.createElement(tagName);
  
  for (let attr in attributes) {
    let value = attributes[attr];
    el.setAttribute(attr, value);
  }
  
  return el;
});

modifiers.my-class-based-modifier\.js

import Modifier from 'ember-modifier';

export default class OnModifier extends Modifier {
  didInstall() {
    console.log('didInstall hook of class based modifier');
  }
  
  didReceiveArguments() {
    console.log('didReceiveArguments hook of class based modifier');
  }
}

modifiers.my-functional-modifier\.js

import { modifier } from 'ember-modifier';

export default modifier((element, [eventName, handler]) => {
  console.log('functional modifier runs');
});

templates.application\.hbs

{{!--
  If the value is a static string it does not throw
  It seems as if a static string is always set as an
  attribute.
  <my-custom-element foo="bar"></my-custom-element>
--}}

{{!--
  As soon as it's a dynamic value Glimmer VM tries
  to set it as a property, which throws.

{{#let "bar" as |value|}}
  <my-custom-element foo={{value}}></my-custom-element>
{{/let}}
--}}

{{!--
  Functional modifier and hooks of class based
  modifiers are executed after connectedCallback
  of custom element.
<my-custom-element {{my-functional-modifier}} {{my-class-based-modifier}}></my-custom-element>
--}}

{{!--
  Using a helper, which creates an element, sets
  the attributes on it and returns it.
  This works fine on inital rendering but causes
  the custom element to be destroyed when ever a
  value changes.
{{#let (create-element "my-custom-element" foo=this.value) as |Element|}}
  {{Element}}
{{/let}}
--}}

<button {{on "click" this.changeValue}}>change value</button>

{{!--
  Using a helper, which does the same as above
  but reuses the same element and only updates
  the attributes when input changes.
--}}
{{#let (create-element-cached "my-custom-element" foo=this.value) as |Element|}}
  {{Element}}
{{/let}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-modifier": "2.1.0"
  }
}