Для этих целей лучше всего подойдет
Svelte.js.
Svelte - это компонентно-ориентированный фреймворк.
С его помощью можно создать как CustomElement, которые можно встроить как в проект на чистом JS, так и в проект на любом другом фреймворке (React, Angulat, Vue).
На результате сборки проекта в режиме CustomElements можно наглядно посмотреть как создается и встраивается в Html созданный элемент.
И вы увидите, что создать CustomElement без Shadow DOM невозможно.
А то что можно добиться больше походит на библиотеку типа OpenLayers (создающее элемент ol.Map) или Higthcharts (создающей диаграмму в вашей html) без гарантии стороннего вмешательства в создаваемые в DOM конструкции.
Потому что только с Shadow DOM можно обеспечить доступ к внутренностям элемента в DOM дереве исключительно обслуживающим его скриптам...