Coder Social home page Coder Social logo

alhadis / domtokenlist Goto Github PK

View Code? Open in Web Editor NEW
1.0 3.0 2.0 69 KB

Enables support for the DOMTokenList interface in IE8-9, and fixes buggy implementations in newer browsers.

Home Page: https://npmjs.com/package/domtokenlist

License: ISC License

JavaScript 92.86% Makefile 7.14%

domtokenlist's Introduction

DOMTokenList Polyfill

Enables support for the DOMTokenList interface in IE8-9, and fixes buggy implementations in newer browsers.

bower install domtokenlist
npm install domtokenlist
component install Alhadis/DOMTokenList

What this does:

  • Adds seamless, dynamically-updating support for token-lists in IE8-9
  • Fixes inability to add/remove multiple tokens in IE10+ (#920755)
  • Adds support for forced toggling if it's missing (#878564)

This polyfill works at feature-level, meaning it doesn't identify shortcomings based on browser vendor or version (though I'm hoping that's common sense to most developers these days).

Total size

  • 2.27 KBs minified
  • 1.21 KBs minified & gzipped

SVG support

Include svg-fix.js before the main polyfill if you're working with SVG elements. For modularity's sake, I've isolated all SVG-specific fixes to their own file.

Why should I use yours? Others work fine.

They might, but so far, every one I've encountered has issues working with both the classList and className attributes simultaneously.

For example, assume the following scenario:

<!DOCTYPE html>
<html class="bar">

<script>
	var root = document.documentElement;
	var rootClasses = root.classList;

	console.log(rootClasses[0]); // Outputs "bar", as expected

	root.className = "foo " + root.className;

	console.log(rootClasses[0]); // Outputs "bar" instead of "foo"
</script>

This is an edge case, but expecting developers to avoid the .className attribute as well as direct references to token-lists (which might be done for brevity's sake) wasn't enough to satisfy me. I wanted a true, transparent, lightweight and dynamic polyfill for the interface I loved so much.

domtokenlist's People

Contributors

alhadis avatar

Stargazers

avatar

Watchers

avatar avatar avatar

Forkers

ganlanyuan waldyrious

domtokenlist's Issues

Ensure "force" parameter of DOMTokenList.toggle is supported

IE10+ lacks support for the optional second parameter of DOMTokenList's .toggle method, meaning conditionally setting a class requires something like element.classList[ test ? "add" : "remove"]("class-name"); or something similarly asinine.

Improve code compressibility

There's a tonne of room for improvement in the compressibility department; lengthy property names like defineProperty should be aliased locally so UglifyJS can munge the hell out of it even further.

Check SVG support

A similar (but more limited) polyfill apparently has issues enabling .classList support in IE10 for SVGElements.

Might be good to look into this and ensure this polyfill functions as expected in SVG documents.

Enable addition/removal of multiple tokens in IE

IE11 (and probably IE10, too) has a bug where multiple tokens can't be added or removed at once.

element.classList.add("coloured", "green");
console.log( element.className ); /** Modern browsers: "coloured green" */
console.log( element.className);  /** IE11: "coloured" */

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.