shadow-dom

1.0.2 • Public • Published

A shadow dom ponyfill

🚧 Please note: This is a work in progress and not usable for production yet

shadow-dom stability

BrowserStack Status

  • 🌲 planed obsolescence: uses native shadow-dom if available
  • 📦 encapsulation: protect against css bleeding
  • 👩‍💻 supports responsive design

Installation

npm install --save shadow-dom

Usage

const {shadowDom} = require('shadow-dom');
 
const el = document.querySelector('[data-protected]');
const protected = shadowDom(el);
 
protected.shadowRoot.innerHTML = '<p>This is protected against outer styles</p>';

Development

npx yarn
code src.js 
npx yarn test

Testing

shadow-dom ensures functionality via cross browser testing.

  • yarn test --local: Headless Chrome, Headless Firefox
  • yarn test --remote: Test on BrowserStack

Remote tests require BrowserStack credentials. Provide them by CLI or a .env file:

BROWSER_STACK_USERNAME=[browserstack-username]
BROWSER_STACK_ACCESS_KEY=[browserstack-access-key]

Testing may optionally be limited to browsers via cli flags

  • yarn test -- --firefox Test only in Firefox
  • yarn test -- --chrome Test only in Chrome

Unit tests are placed next to the files tested in src/**/[name].test.js while integration tests can be found in test/*.js.

# All flags 
--chrome
--edge
--firefox
--ie
--safari

License

shadow-dom is published under the MIT license

Package Sidebar

Install

npm i shadow-dom

Weekly Downloads

4

Version

1.0.2

License

MIT

Last publish

Collaborators

  • marionebl
  • pixelass