details-polyfill
Advanced tools
Readme
Polyfill for the HTML5
<details>element, no dependencies
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.
<details>.In case the browser doesn't support <details>, it adds the following behaviors:
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)<html> element gets the no-details class.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>
...unless it's for a disclosure triangle. This library uses summary::before to create a default triangle.
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.
el.open = true...will not work like how you think it does. You also need to do .setAttribute('open', 'open') or .removeAttribute('open').
<details>.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.
.htc files).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
FAQs
Polyfill for the HTML5 `<details>` element
The npm package details-polyfill receives a total of 10,664 weekly downloads. As such, details-polyfill popularity was classified as popular.
We found that details-polyfill demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.