Skip to content

fix: replace HTML_LOWER_CASE regex with Set to prevent false matches … #452

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
baspinarenes wants to merge 5 commits into from
+56 −3
Closed

fix: replace HTML_LOWER_CASE regex with Set to prevent false matches … #452

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e4c065e
fix: replace HTML_LOWER_CASE regex with Set to prevent false matches …
baspinarenes Mar 11, 2026
23e8496
add changeset for HTML_LOWER_CASE fix
baspinarenes Mar 11, 2026
1d74997
docs: remove redundant explanation from CHANGELOG
baspinarenes Mar 12, 2026
3695080
refactor: add check of native element for safe element handling
baspinarenes Mar 12, 2026
5e4d134
refactor: use custom element check instead static html elements set
baspinarenes Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-html-lower-case.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"preact-render-to-string": patch
---

Replace `HTML_LOWER_CASE` regex with an explicit `Set` to prevent false matches on custom element properties (e.g. `channelId` being incorrectly lowercased to `channelid`)
4 changes: 3 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,8 @@ function _renderToString(

let type = vnode.type,
props = vnode.props;

const isCustomElement = type.includes("-");

// Invoke rendering on Components
if (typeof type == 'function') {
Expand Down Expand Up @@ -666,7 +668,7 @@ function _renderToString(
? 'panose-1'
: name.replace(/([A-Z])/g, '-$1').toLowerCase();
}
} else if (HTML_LOWER_CASE.test(name)) {
} else if (!isCustomElement && HTML_LOWER_CASE.has(name)) {
name = name.toLowerCase();
}
}
Expand Down
46 changes: 45 additions & 1 deletion src/lib/util.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,54 @@
import { DIRTY, BITS } from './constants';

export const VOID_ELEMENTS = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/;

// oxlint-disable-next-line no-control-regex
export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
export const HTML_LOWER_CASE = /^(?:accessK|auto[A-Z]|cell|ch|col|cont|cross|dateT|encT|form[A-Z]|frame|hrefL|inputM|maxL|minL|noV|playsI|popoverT|readO|rowS|src[A-Z]|tabI|useM|item[A-Z])/;
export const HTML_LOWER_CASE = new Set([

@rschristian rschristian Mar 15, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be reverted.

We might want to do this yet (I was playing around with it in #398) but it's not needed to solve the issue at hand which is how these attrs/properties interact with custom elements. It's a separate change altogether.

'accessKey',
'autoCapitalize',
'autoComplete',
'autoCorrect',
'autoFocus',
'autoPlay',
'cellPadding',
'cellSpacing',
'charSet',
'colSpan',
'contentEditable',
'contextMenu',
'controlsList',
'crossOrigin',
'dateTime',
'encType',
'formAction',
'formEncType',
'formMethod',
'formNoValidate',
'formTarget',
'frameBorder',
'hrefLang',
'inputMode',
'maxLength',
'minLength',
'noValidate',
'playsInline',
'popoverTarget',
'popoverTargetAction',
'readOnly',
'rowSpan',
'srcDoc',
'srcLang',
'srcSet',
'tabIndex',
'useMap',
'itemScope',
'itemType',
'itemID',
'itemRef',
'itemProp'
]);
export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;

// Boolean DOM properties that translate to enumerated ('true'/'false') attributes
Expand Down
4 changes: 3 additions & 1 deletion src/pretty.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ function _renderToStringPretty(
props = vnode.props,
isComponent = false;

const isCustomElement = nodeName.includes("-");

// components
if (typeof nodeName === 'function') {
isComponent = true;
Expand Down Expand Up @@ -299,7 +301,7 @@ function _renderToStringPretty(
? 'panose-1'
: name.replace(/([A-Z])/g, '-$1').toLowerCase();
}
} else if (HTML_LOWER_CASE.test(name)) {
} else if (!isCustomElement && HTML_LOWER_CASE.has(name)) {
name = name.toLowerCase();
}

Expand Down