ce-example-02.js

const $hello = Symbol('hello');
const $world = Symbol('world');

class HelloWorld extends HTMLElement {
  static get observedAttributes() {
    return ['hello', 'world'];
  }

  set hello(hello) {
    this[$hello] = hello;
    this.render();
  }

  get hello() {
    return this[$hello];
  }

  set world(world) {
    this[$world] = world;
    this.render();
  }

  get world() {
    return this[$world];
  }

  constructor() {
    super();
    this.hello = 'Hello';
    this.world = 'world';
  }

  attributeChangedCallback(attr, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[attr] = newValue;
    }
  }

  render() {
    this.textContent = `${this.hello} ${this.world}`;
  }
}

customElements.define('hello-world', HelloWorld);

index.html

<hello-world hello="Привет" world="мир"></hello-world>