Using hydrate.renderToString produces "invalid" HTML with <track> #2994
Labels
Bug: Validated
This PR or Issue is verified to be a bug within Stencil
Comments
|
Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now. Thanks for adding this. We don't have a timeframe, but we have identified the issue. |
rwaskiewicz
added
the
Bug: Validated
|
👋 Thanks for the issue report @JaapBarnhoorn! I've labeled this to be properly ingested by our internal issue tracker for the team to take a closer look! |
|
Thank you @rwaskiewicz. |
rwaskiewicz
added
Stencil v5
2 tasks
rwaskiewicz
added a commit
that referenced
this issue
Apr 30, 2024
add `track` to the list of "EMPTY" elements (void elements) that is
referenced when we serialize nodes.
prior to this fix, the output of running `renderToString` as such:
```js
const hydrate = require('./hydrate/index.js');
const src = `<video>
<source src="x" type="video/mp4">
<track
kind="subtitles"
src="x"
>
</video>`;
hydrate.renderToString(src, { prettyHtml: true })
.then(result => console.log(result.html));
```
would result in the following being printed:
```html
<!doctype html>
<html class="hydrated" data-stencil-build="shc9pw4e">
<head>
<meta charset="utf-8">
</head>
<body>
<video>
<source src="x" type="video/mp4">
<!-- NOTE: track has a closing tag -->
<track kind="subtitles" src="x"></track>
</video>
</body>
</html>
```
With this fix applied, we print `track` as a void element:
```html
<!doctype html>
<html class="hydrated" data-stencil-build="z6oqy2b2">
<head>
<meta charset="utf-8">
</head>
<body>
<video>
<source src="x" type="video/mp4">
<track kind="subtitles" src="x">
</video>
</body>
</html>
```
Fixes: #2994
STENCIL-94: Using hydrate.renderToString produces "invalid" HTML with <track>
github-merge-queue bot
pushed a commit
that referenced
this issue
Apr 30, 2024
* fix(hydrate): output track elements as void elms
add `track` to the list of "EMPTY" elements (void elements) that is
referenced when we serialize nodes.
prior to this fix, the output of running `renderToString` as such:
```js
const hydrate = require('./hydrate/index.js');
const src = `<video>
<source src="x" type="video/mp4">
<track
kind="subtitles"
src="x"
>
</video>`;
hydrate.renderToString(src, { prettyHtml: true })
.then(result => console.log(result.html));
```
would result in the following being printed:
```html
<!doctype html>
<html class="hydrated" data-stencil-build="shc9pw4e">
<head>
<meta charset="utf-8">
</head>
<body>
<video>
<source src="x" type="video/mp4">
<!-- NOTE: track has a closing tag -->
<track kind="subtitles" src="x"></track>
</video>
</body>
</html>
```
With this fix applied, we print `track` as a void element:
```html
<!doctype html>
<html class="hydrated" data-stencil-build="z6oqy2b2">
<head>
<meta charset="utf-8">
</head>
<body>
<video>
<source src="x" type="video/mp4">
<track kind="subtitles" src="x">
</video>
</body>
</html>
```
Fixes: #2994
STENCIL-94: Using hydrate.renderToString produces "invalid" HTML with <track>
* review(cb): unit tests
|
The fix for this PR was included in today's v4.18.0 release |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Stencil version:
I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
The resulting html of using
hydrate.renderToString()is no valid html.When providing it with a
<track>element, it will close the tag and produces<track></track>This generates errors in our WCAG report.
Expected behavior:
It should just leave
<track>how it is:https://www.w3.org/TR/html52/semantics-embedded-content.html#the-track-element
Steps to reproduce:
If you use below html as a source and hydrate it with renderToString() it will produce the closing
</track>tag.<source>seems to work fineRelated code:
Other information:
The text was updated successfully, but these errors were encountered: