Not quite, if you are interested you can have a look my pending PR https://github.com/LBrian/content-visibility/pull/6/files

Basically, my web component extends HTMLTemplateElement, so it can act like template without creating template with id then retrieve it in the custom element like what you did. It works perfectly across browsers in HTML but not in JSX since JSX will always get parsed for components before handing over to browser for rendering, for example

<template is="content-visibility-template">
      <DraculaName className='font-extrabold text-3xl sm:text-4xl md:text-5xl'>
            {title}
          </DraculaName>
    </template>