Можно ли внедрить пользовательские атрибуты/свойства в собственные веб-компоненты?

И да и нет.

Там нет ничего встроенного для шаблонов. Но это не значит, что вы не можете этого сделать.

function render(el) {
  el.shadowRoot.innerHTML = `<div>${el._test}</div>`;
}

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['test'];
  }

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      this[`_${attrName}`] = newVal;
      render(this);
    }
  }
}

window.customElements.define("my-component", MyComponent);

<my-component test = "Does this work?"></my-component>
<my-component test = "Yes it does"></my-component>

Вы используете observedAttributes, чтобы указать, какие атрибуты вы хотите отслеживать для изменений. И вы используете attributeChangedCallback в качестве обработчика, когда один из них действительно изменяется.

Затем вам нужно получить значение атрибута в DOM. Если DOM прост, вы можете поступать так же, как я, и каждый раз просто регенерировать его.

Что-то более сложное потребует более сложного алгоритма.

Некоторые люди скажут вам использовать LITHtml. Я нахожу это раздражающим. Большинство моих компонентов очень маленькие и не нуждаются в сложности.

Расширенный

Да, вы можете передать функцию обратного вызова в виде строки. Другими словами, вы передаете имя функции обратного вызова в виде строки, а затем в своем компоненте вызываете eval. НО Я бы не рекомендовал. Это имеет много ограничений и может быть использовано для злых и гнусных целей. :)

Вместо:

• Укажите свойство компонента, которое можно установить для функции обратного вызова.
• Предоставьте функцию для компонента, который вы бы вызвали с помощью функции обратного вызова.
• Отправляйте события из компонента и позвольте addEventListener справиться с этим за вас. Можете ли вы предоставить более подробную информацию о том, что вы хотите сделать с функцией

Вот два полезных вопроса/ответа: * пользовательская функция обратного вызова события веб-компонента в теге * Могу ли я передать функцию как атрибут веб-компоненту?

ОБНОВИТЬ

Был задан вопрос, как избежать рендеринга чаще, чем нужно, когда установлено несколько атрибутов или свойств. Это часто называют «разоблачением».

Вот один из вариантов:

let renderTimeout = null;
function render(el) {
  if (renderTimeout) {
    clearTimeout(renderTimeout);
  }

  renderTimeout = setTimeout(() => {
    el.shadowRoot.innerHTML = `<div>${el._test}</div>`;
  }, 0);
}

Это установит тайм-аут 0, что означает, что это произойдет, как только это будет возможно, часто, как только текущий код завершит работу. Затем произойдет операция рендеринга.