vite-plugin-sfce

Плагин vite для работы с кастомными элементы в однофайловом компоненте.

Шаблоны кастомных элементов инжектируются в html, это может быть полезна для для mpa приложений.

Блок стилей процесситься и добавлется в шаблон.

Использование

Для хайлайта используются инструменты разработки vue и кастомная трансформация, поэтому файлы должны оканчиваться на .sfce.vue.

<template>
  <div>
    <button>Тест</button>
  </div>
</template>

<script lang="ts">
export default class TestComp extends HTMLElement {
  constructor() {
    super()

    const shadowRoot = this.attachShadow({ mode: 'open' })
    const template = document.getElementById(
      'test-comp-template',
    ) as HTMLTemplateElement
    shadowRoot.appendChild(template.content.cloneNode(true))
  }
}
</script>

<style>
:host {
  color: red;
}
</style>

Лицензия

MIT