Porsche Design System

Dsr Ponyfill

Table of Contents

Supported options
Examples

Function name: getDSRPonyfill()

In SSR projects like NextJS, the Porsche Design System components are getting rendered on the server using native web platform API called Declarative Shadow DOM (DSR). The browser support is already good but still limited.

Therefore, we provide a partial in @porsche-design-system/components-react package based on @webcomponents/template-shadowroot which needs to be injected before the closing </body> of your index.html.

Supported options#

Option

Description

Type

Default

format

Defines the output format of the partial. By default, it returns a html string. For jsx it returns a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).

'html' | 'jsx' | 'sha256'

'html'

When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included.

Examples#

Project integration differs based on the project setup. The following showcases the most common ways.

<!-- index.html -->
<body>
  <!--PLACEHOLDER_DSR_PONYFILL-->
</body>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_DSR_PONYFILL-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getDSRPonyfill())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}

Output

The result of this partial looks like this:

<script>
!function(){"use strict";const e=e=>
null===e.parentElement,t=e=>
e.nodeType===Node.ELEMENT_NODE;HTMLTemplateElement.prototype.hasOwnProperty("shadowRoot")||(n=>
{var l;const o=[];let i=n.firstElementChild;for(;i!==n&&null!==i;)if("TEMPLATE"===i.tagName)o.push(i),i=i.content;else if(null!==i.firstElementChild)i=i.firstElementChild;else if(t(i)&&null!==i.nextElementSibling)i=i.nextElementSibling;else{let t;for(;i!==n&&null!==i;)if(e(i)){t=o.pop();const e=t.parentElement,n=t.getAttribute("shadowrootmode");if(i=t,"open"===n||"closed"===n){const l=t.hasAttribute("shadowrootdelegatesfocus");try{e.attachShadow({mode:n,delegatesFocus:l}).append(t.content)}catch{}}else t=void 0}else{const e=i.nextElementSibling;if(null!=e){i=e,void 0!==t&&t.parentElement.removeChild(t);break}const n=null===(l=i.parentElement)||void 0===l?void 0:l.nextElementSibling;if(null!=n){i=n,void 0!==t&&t.parentElement.removeChild(t);break}i=i.parentElement,void 0!==t&&(t.parentElement.removeChild(t),t=void 0)}}})(document.body)}();
</script>