Pass all `<Html>` props to `<html>` (#6378)

* Pass along props to html * Check for html props to be passed * Switch ordering of html tag props * Remove children from this.props

Pass all `<Html>` props to `<html>` (#6378)
* Pass along props to html * Check for html props to be passed * Switch ordering of html tag props * Remove children from this.props
3ba18117 · Joe Haddad · Tim Neutkens · 8b784766 · 3ba18117 · 3ba18117
3 changed file
--- a/packages/next/pages/_document.js
+++ b/packages/next/pages/_document.js
@@ -50,7 +50,12 @@ export class Html extends Component {

  render() {
    const { amphtml } = this.context._documentProps
-    return <html amp={amphtml ? '' : null}>{this.props.children}</html>
+    const { children, ...props } = this.props
+    return (
+      <html {...props} amp={amphtml ? '' : null}>
+        {children}
+      </html>
+    )
  }
 }


--- a/test/integration/app-document/pages/_document.js
+++ b/test/integration/app-document/pages/_document.js
 import crypto from 'crypto'
-import Document, { Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'

 const cspHashOf = (text) => {
  const hash = crypto.createHash('sha256')
@@ -43,7 +43,7 @@ export default class MyDocument extends Document {
    }

    return (
-      <html>
+      <Html className='test-html-props'>
        <Head nonce='test-nonce'>
          {csp ? <meta httpEquiv='Content-Security-Policy' content={csp} /> : null}
          <style>{`body { margin: 0 } /* custom! */`}</style>
@@ -54,7 +54,7 @@ export default class MyDocument extends Document {
          <Main />
          <NextScript nonce='test-nonce' />
        </body>
-      </html>
+      </Html>
    )
  }
 }
--- a/test/integration/app-document/test/rendering.js
+++ b/test/integration/app-document/test/rendering.js
@@ -10,6 +10,11 @@ export default function ({ app }, suiteName, render, fetch) {

  describe(suiteName, () => {
    describe('_document', () => {
+      test('It has a custom html class', async () => {
+        const $ = await get$('/')
+        expect($('html').hasClass('test-html-props'))
+      })
+
      test('It has a custom body class', async () => {
        const $ = await get$('/')
        expect($('body').hasClass('custom_class'))