partywall

A prollyfill for the style aspects of the HTML Parts and Walls spec.

For the DOM aspects of the HTML Parts and Walls spec, see getpart-polyfill.

Using partywall.js

To start using this script, call the partywallStyler() function it adds to the global environment. This will populate the needed information for all elements on the page, set up mutation observers to keep that information accurate, and add a stylesheet to the document to contain all styles whose selectors are dynamically generated by this styler.

To add a style to be applied by the styler, use addStyle(list, style). The list argument is an array of selectors, where the selectors are arrays of wall-separated selector strings. (Any selectors that involve non-walled descendant selectors between them may be specified as further arrays, whose contents will be concatenated with spaces.) The style argument is the string of CSS style properties, like what you would assign to a style property on an element.

Known limitations

• Part selectors specified as an ID do not increase specificity the way the spec states they should.
• While the spec states that walled descendant selectors should be capable of crossing Shadow DOM boundaries, the selectors specified by partywall-style.js are document-bound.
• Increases in wall depth will increase selector application time, due to the way styles are generated to match through all potential wall roots.