-
Notifications
You must be signed in to change notification settings - Fork 781
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.
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
Using hydrate.renderToString produces "invalid" HTML with <track> #2994
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. |
👋 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. |
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>
* 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 |
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: