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

Aperta
  • Qualcosa non va?
#7,016 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript, typescript, web-dev
Ambito
frontend, web-dev

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.