Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i shadow-dom

    DownloadsWeekly Downloads

    635

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar