Synt attributes and properties for custom elements

syncAttributesAndProperties.js

export function syncAttributesAndProperties(self) {
  self.constructor.observedAttributes.forEach(attribute => {
    const descriptor = Object.getOwnPropertyDescriptor(self.constructor.prototype, attribute);

    Object.defineProperty(self, attribute, {
      get() {
        if (descriptor?.get) {
          return descriptor.get.apply(self, []);;
        }
        return self.getAttribute(attribute);
      },
      set(_value) {
        if (_value && self[attribute] !== _value) {
          self.setAttribute(attribute, _value);
        } else if (!_value) {
          self.removeAttribute(attribute);
        }
        if (descriptor?.set) {
          descriptor.set.apply(self, [_value]);
        }
      }
    });
  });
}