HTMLSelectElement 확장

Question

최근에 나는 의미 론적 및 접근성상의 이유로 새로운 요소를 만드는 대신 HTMLSelectElement를 확장하려고 시도했습니다.

 let customSelect = function () {
  customElements.define(
    "custom-select",
    class CustomSelect extends HTMLSelectElement {
      connectedCallback() {
        this.attachShadow({ mode: "open" });
        this.shadowRoot.innerHTML = `
      test
      `;
      }
    },
    { extends: "select" }
  );
};

export default customSelect;

다음 오류를 반환했습니다. custom-select.js : 6 Uncaught DOMException : 'Element'에서 'attachShadow'실행 실패 :이 요소는 attachShadow를 지원하지 않습니다.

알겠습니다. 예측 가능했습니다.

Shadow-dom으로 작업 할 수 없기 때문에 내 질문은 거기에서 가장 좋은 해결책 은 무엇입니까?
지금까지 상상할 수 있습니다.

• 이 컴포넌트의 innerHTML로 직접 작업합니다.
• Shadow Dom과 함께 작동하는 새로운 요소를 만듭니다.
• 기존 그림자를 덮어 쓰시겠습니까? (해당 방법이 존재할 수있는 경우).

그렇다면 가장 간단하고 'SEO 친화적 인'솔루션은 무엇입니까?
nb : 솔루션은 사용자 지정 요소 기반이어야합니다.

Answer 1

이 컴포넌트의 innerHTML로 직접 작업합니다.

"가장 간단하고 'SEO 친화적 인'솔루션"입니다.

---

Shadow Dom과 함께 작동하는 새로운 요소를 만듭니다.

향상된 UI를 정의 할 수 있으므로 가장 사용자 친화적 일 수 있습니다.

---

기존 그림자를 덮어 쓰시겠습니까?

불가능합니다. 읽기 전용입니다.

---

이 다른 SO 게시물에서 여기에 사용자 정의 요소 로 향상된 예 .