details-polyfill
Polyfill for the HTML5 `<details>` element
Last updated 3 years ago by rstacruz .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install details-polyfill 
SYNC missed versions from official npm registry.

details-polyill

Polyfill for the HTML5 <details> element, no dependencies


Usage

details-polyfill is available via npm.

npm install --save details-polyfill

Requiring it will immediately inject the needed behaviors.

require('details-polyfill')

The file index.js is also usable as a standalone script.


How it works

<summary>Just include the script on any page that uses <details>.</summary>

In case the browser doesn't support <details>, it adds the following behaviors:

  • When clicking details > summary, it toggles the open attribute in details.

It also adds these CSS styles:

  • summary:before is styled with a disclosure triangle.
  • details:not([open]) > :not(summary) elements are hidden. (that is: all children of closed details, except summary)
  • The <html> element gets the no-details class.

Limitations

<summary>Keep these guidelines in mind.</summary>

No loose text

The <details> element must not have loose text inside it. Everything inside it should be in elements.

<!-- ✗ This will NOT work -->
<details>
  <summary>More info...</summary>
  No info available.
</details>
<!-- ✓ But this will -->
<details>
  <summary>More info...</summary>
  <span>No info available.</span>
</details>

Don't style summary::before

...unless it's for a disclosure triangle. This library uses summary::before to create a default triangle.

Summary as first child

The summary element must also be the first child of the details element. Browsers supporting the details element natively will hoist summary elements up, but details-polyfill.js won't.

JavaScript el.open = true

...will not work like how you think it does. You also need to do .setAttribute('open', 'open') or .removeAttribute('open').

Alternatives

<summary>Here are a few other polyfills for <details>.</summary>

I wrote this because everything else out there either depend on big libraries, or are too complicated. In contrast, details-polyfill has <100 lines of code, and only comes with a .js file.

Thanks

details-polyfill © 2016+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz

Current Tags

  • 1.1.0                                ...           latest (3 years ago)

4 Versions

  • 1.1.0                                ...           3 years ago
  • 1.0.2                                ...           4 years ago
  • 1.0.1                                ...           4 years ago
  • 1.0.0                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 4
Last Day 0
Last Week 4
Last Month 26
Dependencies (0)
None
Dev Dependencies (0)
None

Copyright 2014 - 2016 © taobao.org |