DEV Community: Jason Shimkoski

Introducing Custom Elements Runtime

Jason Shimkoski — Tue, 02 Sep 2025 01:38:09 +0000

For years, I wished for a magical open-source tool that would make building Custom Elements feel as easy and enjoyable as crafting components in Vue, Svelte, or React.

But that tool never showed up.

We’ve had options like Lit and Skate that work—but let’s be honest: they are dated and clunky.

Furthermore, why must a library require build steps and extensive boilerplate? What frontend developer actually wants to use a class-based syntax, or frigging decorators?

And, don’t even get me started on the pains of wrestling Tailwind CSS or other global CSS into the Shadow DOM—it’s like trying to fold origami with oven mitts.

What I really wanted was something:

With strong type auto-inference
Functional, not class-based
Free of dependencies
Stupidly simple to use
Tailwind-style utility classes and animations baked-in, at runtime
Friendly to SSR, routing, and inter-component communication (e.g., event bus & global store)
And, of course—CDN-ready so I could just drop it in without bundlers

So I stopped waiting and I built it. 💥

Meet my Custom Elements Runtime—a lightweight, no-frills tool that blends the best parts of Vue, React, Svelte, Tailwind CSS, and Web Components into one tasty package.

Define a Component

import { component, ref, html, useProps, useEmit } from '@jasonshimmy/custom-elements-runtime';

component('my-counter', () => {
  const props = useProps({ initialCount: 0 })
  const emit = useEmit();

  const count = ref(props.initialCount);

  const handleClick = () => {
    count.value++;
    emit('update:initial-count', { count: count.value });
  };

  return html`
    <button
      type="button"
      class="px-4 py-2 bg-blue-500 text-white rounded"
      @click.prevent="${handleClick}"
    >
      Count: ${count.value}
    </button>
  `;
});

Use it in HTML

<my-counter
  initial-count="5"
></my-counter>

<script>
const counterEl = document.querySelector('my-counter');

counterEl.addEventListener('update:initial-count', (event) => {
  console.log('Count updated to:', event.detail.count);
})
</script>

✨ Why You’ll Love It

Blazing Fast: Minimal runtime, instant updates, zero dependencies.
JIT CSS: Utility-first styling on demand, directly in your HTML.
Built-in Animations: Vue-style Transition and TransitionGroup functions with presets.
No Build Required: Just write and run—no bundling overhead.
TypeScript First: Strong types, IntelliSense, and safety built in.
Functional API: No classes, no boilerplate—just functions.
SSR & HMR Ready: Universal rendering + instant hot reloads.
Extensible: Directives, routing, event bus, store, and more.
Developer Friendly: Clean docs, sharp examples, and it "just works."

It’s fast, flexible, powerful, genuinely fun to develop with, and is truly a one-stop shop with everything you would ever need.

It is The Complete Web Components Framework.

Try it out on Codepen and drop a ⭐ on GitHub.

While you're at it, play a fun little game I developed, Solatro, which is simplified version of the popular card-based game, Balatro (original credit for the Solatro tabletop game goes to TechDweeb). And, yes, I built the entire game with the Custom Elements Runtime.

Have an awesome day.

SSR-Friendly Unique HTML IDs in Vue 3

Jason Shimkoski — Thu, 24 Feb 2022 00:34:05 +0000

How many other developers out there have encountered the following scenario:

You have a Vue component that needs to use an HTML id attribute to link elements together:

<template>
  <div>
    <label for="inputId">Label</label>
    <input id="inputId" type="text">
  </div>
</template>

But, as it turns out, you need to have multiple instances of that component on the page. To avoid breaking the page with id collisions, you need a unique id for the input element.

Unfortunately, Vue does not provide an instance id for components that you can key off of to do this.

What you'll often see other developers do is something along these lines (this is off the top of my head so forgive any silly errors):

<template>
  <div>
    <label :for="inputId">Label</label>
    <input :id="inputId" type="text">
  </div>
</template>

<script>
let id = 0
export default {
  data() {
    return {
      inputId: null
    }
  },
  created() {
    id++
    this.inputId = id
  }
}
</script>

This will work for the most part until server-side rendering enters the picture. Due to separate thread processing, no matter what you do, id will be out of sync on the server and on the client.

That is a real bummer, but there is a workaround.

I've written vue-uid for this very issue.

It is a tiny directive that generates a unique identifier that is automatically assigned to an element’s id attribute.

Here is a usage example:

<script setup lang="ts">
import { ref } from 'vue'
const input = ref<null | HTMLElement>(null)
</script>

<template>
  <div>
    <label :for="input?.id">Input label</label>
    <input v-uid ref="input" type="text">
  </div>
</template>

The best part of this is that you don't need to write extra code or pull in additional dependencies to figure out how to generate a unique id in the first place, and second, it is SSR-friendly! Slap the v-uid directive on an element and you are off to the races with a unique id you can count on.

If you'd like more understanding into how vue-uid works, be sure to read the Custom Directives documentation.

I hope you found this useful.

Thanks.

Building a Table Component with Dynamic Slot Names in Vue 3

Jason Shimkoski — Tue, 22 Feb 2022 01:41:34 +0000

One of the coolest parts of Vue 3 (and 2) is a capability that is often times completely overlooked: the ability to use a slot with a dynamic name.

Among other things, this gives you a really powerful method of injecting data exactly where you want it within an array of children.

What does that mean for us? Well, let's build a SimpleTable component to find out.

Let's say you want to offer a table component that automatically builds its rows based on an array of objects called items:

const items = ref([
  { id: 1, title: 'First entry', description: 'Lorem ipsum' },
  { id: 1, title: 'Second entry', description: 'Sit dolar' },
])

In order to build the columns, let's use another array of objects called fields:

const fields = ref([
  { key: 'title', label: 'Title' },
  { key: 'description', label: 'Description' }
])

With items and fields defined, I'd like the table to be used like this:

<SimpleTable :items="items" :fields="fields" />

Awesome, with just a few v-for statements that loop over items and fields, and a little bit of logic, we can build out our SimpleTable component that automatically generates our rows and columns.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="field in fields" :key="field.key">
          {{ field.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="key in displayedFieldKeys">
          {{ item[key] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue';

interface TableField {
  key: string
  label: string
}

interface TableItem {
  id: number
  [key: string]: unknown
}

const props = defineProps({
  fields: {
    type: Array as PropType<TableField[]>,
    default: () => []
  },
  items: {
    type: Array as PropType<TableItem[]>,
    default: () => []
  }
})

const displayedFieldKeys = computed(() => {
  return Object.entries(props.fields).map(([_key, value]) => value.key)
})
</script>

Totally cool, right!? But, what if we want to modify the content of those glorious table cells based on their field key? For example, making the title bold, or injecting additional data within each cell.

Dynamic slot names to the rescue!

Let's wrap the content of each table cell in one of these slots:

...
<tr v-for="item in items" :key="item.id">
  <td v-for="key in displayedFieldKeys">
    <slot
      :name="`cell(${key})`"
      :value="item[key]"
      :item="item"
    >
      {{ item[key] }}
    </slot>
  </td>
</tr>
...

Now, whenever you want to modify the content of a set of cells based on the field key, you can do this:

<SimpleTable :items="items" :fields="fields">
  <template #cell(title)="{ value, item }">
    <p>A bold item title: <strong>{{ value }}</strong></p>
    <p>Item ID for some reason: {{ item.id }}</p>
  </template>
</SimpleTable>

Neato! Now, you can pinpoint the content you want to modify without having to deal with excessive markup.

For the heck of it, I built out a slightly beefier version of this table component with some additional bells and whistles such as caption support, col styling, hiding and formatting fields, and determining whether to use th or td for cells.

Column sorting will come in a future revision of this article.

<template>
  <table>
    <caption v-if="!!$slots.caption || caption">
      <slot name="caption">{{ caption }}</slot>
    </caption>
    <colgroup>
      <template v-for="field in displayedFields" :key="field.key">
        <slot :name="`col(${field.key})`">
          <col>
        </slot>
      </template>
    </colgroup>
    <thead>
      <tr>
        <th v-for="field in displayedFields">
          <slot :name="`head(${field.key})`" :field="field">
            {{ field.label }}
          </slot>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <template v-for="key in displayedFieldKeys">
          <Component :is="cellElement(key as string)">
            <slot
              :name="`cell(${key})`"
              :value="format(item, (key as string))"
              :item="item"
              :format="(k: string) => format(item, k)"
            >
              {{ format(item, (key as string)) }}
            </slot>
          </Component>
        </template>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue';

interface TableField {
  key: string
  label: string
  format?: Function
  hidden?: boolean
  header?: boolean
}

interface TableItem {
  id: number
  [key: string]: unknown
}

const props = defineProps({
  fields: { type: Array as PropType<TableField[]>, default: () => [] },
  items: { type: Array as PropType<TableItem[]>, default: () => [] },
  caption: { type: String, default: null }
})

const displayedFields = computed(() => props.fields.filter((i) => !i.hidden))

const displayedFieldKeys = computed(() => {
  return Object.entries(displayedFields.value).map(([_key, value]) => value.key)
})

const cellElement = (key: string) => {
  const field = props.fields.find((f) => f.key === key)
  return field && field.header ? 'th' : 'td'
}

const format = (item: TableItem, key: string) => {
  const field = props.fields.find((f) => f.key === key)
  return field && field.format ? field.format(item[key]) : item[key]
}
</script>

I hope you found this useful.

Thanks!

Don’t Overthink It; Typescript Isn’t Scary

Jason Shimkoski — Fri, 18 Feb 2022 01:47:21 +0000

A few years ago, when I first delved into the world of strongly-typed JavaScript, I absolutely hated it.

Don’t get me wrong, I didn’t hate the concept of it. I didn't mind the sometimes obtuse type errors it spits at you, that it was perceived to be difficult to learn, or even the corporation pushing it. It was the setup process and the excessive configuration necessary at the time that made me want to chew on marbles.

When I have an idea or a project that I want to work on, I just want to...well, work on it! Not configure it.

Nowadays, with enhancements to build tools (Vite specifically), that headache, thankfully, is all but extinct.

With a couple of terminal commands, you have a complete Typescript-ready workspace that is not only a joy to use, but it is faster than starting with a basic httpd server and an index.html file.

Now that the configuration junk is no longer an issue, you would think you could finally get to work.

Then, it happens… you stumble upon your first type error. When you do, like everyone does, you Google it.

Suddenly, you are assaulted by blog post after blog post written by people making Typescript seem way more complicated than it really is.

You cower in the corner with tears streaming down your face, wondering how you could possibly ever memorize all of the utility types.

You start to assume everything needs a class decorator for some reason, and you start begging your fellow coders for answers to riddles like, “What the hell is the difference between String and string?"

You then kneel and pray to Gozer to make it past your first battle with any.

Back up! Slow down! It’s not that complicated. Nine times out of ten, all you need to do is examine your code and ask yourself what you are actually trying to accomplish.

Once you do that, the type, or interface that you need to define will jump out at you. Define it based on what your code is trying to do and go from there.

Before you know it, your code editor will spring to life. You’ll get auto completion, jumping to definition functionality, and documentation for what you’re writing as you are writing it.

Once this miracles occurs, you realize that all of the fear you once had was unfounded.

You’ll find that when you start small and with the basics, the scary factor of Typescript vanishes and you’re left with an amazing coding experience.

If you can get past the initial projection that Typescript is tough, and just make it easy, you’ll be rewarded.

Sending a V-Model Through a Slot in Vue 3

Jason Shimkoski — Wed, 16 Feb 2022 13:16:58 +0000

If you ever attempt to send a v-model through a slot in Vue 3 (or Vue 2), you learn pretty quickly that it isn't possible out of the box. However, there is a workaround.

The following code example allows you to update the internal state of the SlottedComponent from a parent. This is useful in cases where you want the consumer of your component to be able to style or control its internal state.

SlottedComponent:

<template>
  <slot
    :input-value="inputValue"
    :update-input-value="updateInputValue"
  />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const inputValue = ref('')
  const updateInputValue = (event: Event) => {
    inputValue.value = (event.target as HTMLInputElement).value
  }
</script>

In a parent component:

<template>
  <SlottedComponent>
    <template #default="{ inputValue, updateInputValue }">
      <input
        type="text"
        :value="inputValue"
        @keyup="updateInputValue"
      >
    </template>
  </SlottedComponent>
</template>

The key here is that you cannot directly set a v-model bound to inputValue on the parent's input element as you typically would since it cannot cross the slot boundary. However, you can set the value of the input to inputValue and call an event, such as @keyup, to send any changes back to the SlottedComponent.

I hope you found this useful. Have a great day.

Scoping Normalized Preflight CSS

Jason Shimkoski — Sat, 12 Feb 2022 21:10:28 +0000

Have you ever wanted to write a component library with, or port a legacy codebase to, a modern utility-based CSS framework such as Tailwind CSS or WindiCSS, just to realize that their Preflight CSS doesn't grant you the flexibility you deserve?

Preflight lives in the global CSS namespace, so you cannot reliably use it or disable it for either of those use cases without some annoyances: You need to reach for utility classes that you typically don't need to use, the reset from your legacy CSS framework will override your base styling, etc.

That's annoying, man! The reason developers love Tailwind CSS and WindiCSS is that they are largely brainless affairs. You just slap some utility classes on elements and you're good to go. Trying to hack around the shortcomings of Preflight when it fails you takes this convenience away.

Luckily, there is an easy fix!

Enter :where(), the amazing CSS pseudo selector that gives us super powers.

This little guy does not effect CSS specificity. If we wrap a parent selector with it, e.g, :where(.preflight), and make a few modifications to the CSS, we can remove it from the global CSS namespace and tailor it to only reset the portions of a web application that we want complete control over.

You can now create your component library or port your existing codebase to Tailwind CSS or WindiCSS and use a beautiful Preflight reset, all without worrying about global namespace collisions.

Below you will find an altered version of the Tailwind CSS 3 Preflight scoped to a parent .preflight class. It could use some clean up but will get you 99% of the way there.

Hopefully, Tailwind CSS or WindiCSS will bake this sort of functionality into their core. Until then, thanks to :where(), we have a workaround.

:where(.preflight) {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --border-color: rgb(209 213 219);
  --placeholder-color: rgb(156 163 175);
}
:where(.preflight) *,
:where(.preflight) ::before,
:where(.preflight) ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color);
}
:where(.preflight)  {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-sans);
}
:where(.preflight)  {
  margin: 0;
  line-height: inherit;
}
:where(.preflight) hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
:where(.preflight) abbr:where([title]) {
  text-decoration: underline dotted;
}
:where(.preflight) h1,
:where(.preflight) h2,
:where(.preflight) h3,
:where(.preflight) h4,
:where(.preflight) h5,
:where(.preflight) h6 {
  font-size: inherit;
  font-weight: inherit;
}
:where(.preflight) a {
  color: inherit;
  text-decoration: inherit;
}
:where(.preflight) b,
:where(.preflight) strong {
  font-weight: bolder;
}
:where(.preflight) code,
:where(.preflight) kbd,
:where(.preflight) samp,
:where(.preflight) pre {
  font-family: var(--font-mono);
  font-size: 1em;
}
:where(.preflight) small {
  font-size: 80%;
}
:where(.preflight) sub,
:where(.preflight) sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
:where(.preflight) sub {
  bottom: -0.25em;
}
:where(.preflight) sup {
  top: -0.5em;
}
:where(.preflight) table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
:where(.preflight) button,
:where(.preflight) input,
:where(.preflight) optgroup,
:where(.preflight) select,
:where(.preflight) textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:where(.preflight) button,
:where(.preflight) select {
  text-transform: none;
}
:where(.preflight) button,
:where(.preflight) [type='button'],
:where(.preflight) [type='reset'],
:where(.preflight) [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:where(.preflight) :-moz-focusring {
  outline: auto;
}
:where(.preflight) :-moz-ui-invalid {
  box-shadow: none;
}
:where(.preflight) progress {
  vertical-align: baseline;
}
:where(.preflight) ::-webkit-inner-spin-button,
:where(.preflight) ::-webkit-outer-spin-button {
  height: auto;
}
:where(.preflight) [type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
:where(.preflight) ::-webkit-search-decoration {
  -webkit-appearance: none;
}
:where(.preflight) ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
:where(.preflight) summary {
  display: list-item;
}
:where(.preflight) blockquote,
:where(.preflight) dl,
:where(.preflight) dd,
:where(.preflight) h1,
:where(.preflight) h2,
:where(.preflight) h3,
:where(.preflight) h4,
:where(.preflight) h5,
:where(.preflight) h6,
:where(.preflight) hr,
:where(.preflight) figure,
:where(.preflight) p,
:where(.preflight) pre {
  margin: 0;
}
:where(.preflight) fieldset {
  margin: 0;
  padding: 0;
}
:where(.preflight) legend {
  padding: 0;
}
:where(.preflight) ol,
:where(.preflight) ul,
:where(.preflight) menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
:where(.preflight) textarea {
  resize: vertical;
}
:where(.preflight) input::placeholder,
:where(.preflight) textarea::placeholder {
  opacity: 1;
  color: var(--placeholder-color);
}
:where(.preflight) button,
:where(.preflight) [role="button"] {
  cursor: pointer;
}
:where(.preflight) :disabled {
  cursor: default;
}
:where(.preflight) img,
:where(.preflight) svg,
:where(.preflight) video,
:where(.preflight) canvas,
:where(.preflight) audio,
:where(.preflight) iframe,
:where(.preflight) embed,
:where(.preflight) object {
  display: block;
  vertical-align: middle;
}
:where(.preflight) img,
:where(.preflight) video {
  max-width: 100%;
  height: auto;
}
:where(.preflight) [hidden] {
  display: none;
}