bug: setTagTransformer transforms every tag rendered by h(), including native HTML tags

Abierto
  • ¿Algo no está bien?
#7,016 0 comentarios 1 reacción 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
javascript, typescript, web-dev
Área
frontend, web-dev

Línea de trabajo

Start in the runtime's h() function, where transformTag is applied to every string node name, and compare it with how cmpMeta.$tagName$ identifies component tags. Also read setTagTransformer and its JSDoc example. Done means either the transformer no longer receives native HTML tags such as div, span and slot, or the docs state clearly that it receives every rendered tag. The maintainers still need to choose between these options, so confirm that before writing code.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Stencil Version

4.45.2

Current Behavior

When a transformer is registered via setTagTransformer(fn), the runtime applies fn to every string tag rendered through h() — not only component tags. Native HTML tags used inside a component's shadow DOM (div, span, label, slot, input, …) are renamed as well.

With a natural consumer callback like (tag) => \${tag}-sample`, the entire internal structure of every component becomes unknown elements (, ): slotted content no longer projects, ` stops being an input, and components render broken with no error or warning.

The mechanism sits in the runtime's h():

var h = (nodeName, vnodeData, ...children) => {
  if (typeof nodeName === "string") {
    nodeName = transformTag(nodeName);   // every string tag
  }
  ...
}

The docs/JSDoc example only accidentally protects users:

setTagTransformer((tag) => {
  if (tag.startsWith('my-')) return `new-${tag}`;
  return tag;
});

It never states that the callback receives every rendered tag, including native HTML.

Minimal reproduction

Self-contained page (importmap + a built dist-custom-elements component), verified against 4.45.2:

<script type="importmap">
  {"imports": {"@stencil/core/internal/client": "./vendor/stencil-core/internal/client/index.js"}}
</script>
<script type="module">
  import { setTagTransformer, transformTag } from '@stencil/core/internal/client';
  import { defineCustomElement } from './components/kol-button.js';

  setTagTransformer((tag) => `${tag}-sample`);
  defineCustomElement();

  const host = document.createElement(transformTag('kol-button'));
  host.setAttribute('_label', 'Label');
  document.body.append(host);
</script>

Observed shadow DOM (host correctly upgrades as kol-button-sample, internals do not):

<div-sample class="kol-button kol-button--standalone kol-button--normal">
  <button-sample class="kol-button__interactive-element" type="button">
    <span-sample class="kol-span kol-button__text">
      <span-sample class="kol-span__label">Label</span-sample>
      <slot-sample name="expert" slot="expert"></slot-sample>
Expected Behavior

The runtime already knows which tags are component tags (cmpMeta.$tagName$). The transformer should receive only tags it can meaningfully rename — ideally component tags by default — or the docs/JSDoc must state explicitly that the callback receives every rendered tag including native HTML, and that the callback therefore has to be selective. Currently a one-line consumer callback silently destroys every component's internal structure.

System Info

macOS 15 (arm64) and Linux (CI, Firefox), Stencil 4.45.2, Node 24. Reproduced with dist-custom-elements output and with the lazy loader.

Additional context

We hit this while migrating a component library's tag-rename feature from a tag-constant mutation approach to the native API. Our visual regression suite (which renders the whole sample app with the transformer enabled) caught it; a naive one-line callback destroyed the internal structure of every component while unit tests stayed green, because the components themselves hydrate fine — only the shadow structure is renamed.

Lenguaje dominante
TypeScript
Estrellas
13.2k
Forks
865
Merge medio
2 d 16 h
PR fusionados (30 d)
29

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de stenciljs/core

Todos los issues de stenciljs/core

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.