diff --git a/config/examples/example.html b/config/examples/example.html
index a90b691dc4..6981f73b6e 100644
--- a/config/examples/example.html
+++ b/config/examples/example.html
@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     {{{ extraHead.local }}}
     {{{ css.tag }}}
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame"></script>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList"></script>
     <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script>
     <title>{{ title }}</title>
   </head>
diff --git a/src/ol/control/attributioncontrol.js b/src/ol/control/attributioncontrol.js
index 4ec528b2b3..3664842c21 100644
--- a/src/ol/control/attributioncontrol.js
+++ b/src/ol/control/attributioncontrol.js
@@ -4,7 +4,6 @@ goog.provide('ol.control.Attribution');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.classlist');
 goog.require('goog.style');
 goog.require('ol');
 goog.require('ol.Attribution');
@@ -275,9 +274,9 @@ ol.control.Attribution.prototype.updateElement_ = function(frameState) {
   }
   if (renderVisible &&
       ol.object.isEmpty(this.attributionElementRenderedVisible_)) {
-    goog.dom.classlist.add(this.element, 'ol-logo-only');
+    this.element.classList.add('ol-logo-only');
   } else {
-    goog.dom.classlist.remove(this.element, 'ol-logo-only');
+    this.element.classList.remove('ol-logo-only');
   }
 
   this.insertLogos_(frameState);
@@ -340,7 +339,7 @@ ol.control.Attribution.prototype.handleClick_ = function(event) {
  * @private
  */
 ol.control.Attribution.prototype.handleToggle_ = function() {
-  goog.dom.classlist.toggle(this.element, 'ol-collapsed');
+  this.element.classList.toggle('ol-collapsed');
   if (this.collapsed_) {
     goog.dom.replaceNode(this.collapseLabel_, this.label_);
   } else {
@@ -370,7 +369,7 @@ ol.control.Attribution.prototype.setCollapsible = function(collapsible) {
     return;
   }
   this.collapsible_ = collapsible;
-  goog.dom.classlist.toggle(this.element, 'ol-uncollapsible');
+  this.element.classList.toggle('ol-uncollapsible');
   if (!collapsible && this.collapsed_) {
     this.handleToggle_();
   }
diff --git a/src/ol/control/overviewmapcontrol.js b/src/ol/control/overviewmapcontrol.js
index 3e97a64c62..8b5aea83cf 100644
--- a/src/ol/control/overviewmapcontrol.js
+++ b/src/ol/control/overviewmapcontrol.js
@@ -2,7 +2,6 @@ goog.provide('ol.control.OverviewMap');
 
 goog.require('goog.asserts');
 goog.require('goog.dom');
-goog.require('goog.dom.classlist');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol');
@@ -444,7 +443,7 @@ ol.control.OverviewMap.prototype.handleClick_ = function(event) {
  * @private
  */
 ol.control.OverviewMap.prototype.handleToggle_ = function() {
-  goog.dom.classlist.toggle(this.element, 'ol-collapsed');
+  this.element.classList.toggle('ol-collapsed');
   if (this.collapsed_) {
     goog.dom.replaceNode(this.collapseLabel_, this.label_);
   } else {
@@ -487,7 +486,7 @@ ol.control.OverviewMap.prototype.setCollapsible = function(collapsible) {
     return;
   }
   this.collapsible_ = collapsible;
-  goog.dom.classlist.toggle(this.element, 'ol-uncollapsible');
+  this.element.classList.toggle('ol-uncollapsible');
   if (!collapsible && this.collapsed_) {
     this.handleToggle_();
   }
diff --git a/src/ol/control/rotatecontrol.js b/src/ol/control/rotatecontrol.js
index e71f3c31c8..5fa809f762 100644
--- a/src/ol/control/rotatecontrol.js
+++ b/src/ol/control/rotatecontrol.js
@@ -1,7 +1,6 @@
 goog.provide('ol.control.Rotate');
 
 goog.require('goog.dom');
-goog.require('goog.dom.classlist');
 goog.require('ol.events');
 goog.require('ol.events.EventType');
 goog.require('ol');
@@ -41,7 +40,7 @@ ol.control.Rotate = function(opt_options) {
         'ol-compass', label);
   } else {
     this.label_ = label;
-    goog.dom.classlist.add(this.label_, 'ol-compass');
+    this.label_.classList.add(this.label_, 'ol-compass');
   }
 
   var tipLabel = options.tipLabel ? options.tipLabel : 'Reset rotation';
@@ -88,7 +87,7 @@ ol.control.Rotate = function(opt_options) {
   this.rotation_ = undefined;
 
   if (this.autoHide_) {
-    goog.dom.classlist.add(this.element, ol.css.CLASS_HIDDEN);
+    this.element.classList.add(ol.css.CLASS_HIDDEN);
   }
 
 };
@@ -156,8 +155,12 @@ ol.control.Rotate.render = function(mapEvent) {
   if (rotation != this.rotation_) {
     var transform = 'rotate(' + rotation + 'rad)';
     if (this.autoHide_) {
-      goog.dom.classlist.enable(
-          this.element, ol.css.CLASS_HIDDEN, rotation === 0);
+      var contains = this.element.classList.contains(ol.css.CLASS_HIDDEN);
+      if (!contains && rotation === 0) {
+        this.element.classList.add(ol.css.CLASS_HIDDEN);
+      } else if (contains && rotation !== 0) {
+        this.element.classList.remove(ol.css.CLASS_HIDDEN);
+      }
     }
     this.label_.style.msTransform = transform;
     this.label_.style.webkitTransform = transform;
diff --git a/test/index.html b/test/index.html
index 3d461b2021..0426864072 100644
--- a/test/index.html
+++ b/test/index.html
@@ -15,7 +15,7 @@
   <script type="text/javascript" src="../node_modules/mocha/mocha.js"></script>
   <script type="text/javascript" src="../node_modules/proj4/dist/proj4.js"></script>
   <script type="text/javascript" src="test-extensions.js"></script>
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame"></script>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
   <script>
     if (typeof initMochaPhantomJS === 'function') {
       initMochaPhantomJS()
diff --git a/test/spec/ol/control/zoomslidercontrol.test.js b/test/spec/ol/control/zoomslidercontrol.test.js
index e3afcd93e7..6469073698 100644
--- a/test/spec/ol/control/zoomslidercontrol.test.js
+++ b/test/spec/ol/control/zoomslidercontrol.test.js
@@ -32,8 +32,7 @@ describe('ol.control.ZoomSlider', function() {
       var zoomSliderContainer = zoomSliderContainers[0];
       expect(zoomSliderContainer instanceof HTMLDivElement).to.be(true);
 
-      var hasUnselectableCls = goog.dom.classlist.contains(zoomSliderContainer,
-          'ol-unselectable');
+      var hasUnselectableCls = zoomSliderContainer.classList.contains('ol-unselectable');
       expect(hasUnselectableCls).to.be(true);
 
       var zoomSliderThumbs = zoomSliderContainer.querySelectorAll('.ol-zoomslider-thumb');
@@ -42,8 +41,7 @@ describe('ol.control.ZoomSlider', function() {
       var zoomSliderThumb = zoomSliderThumbs[0];
       expect(zoomSliderThumb instanceof HTMLButtonElement).to.be(true);
 
-      hasUnselectableCls = goog.dom.classlist.contains(zoomSliderThumb,
-          'ol-unselectable');
+      hasUnselectableCls = zoomSliderThumb.classList.contains('ol-unselectable');
       expect(hasUnselectableCls).to.be(true);
     });
 
@@ -173,7 +171,6 @@ describe('ol.control.ZoomSlider', function() {
 
 });
 
-goog.require('goog.dom.classlist');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control.ZoomSlider');
diff --git a/test_rendering/index.html b/test_rendering/index.html
index b62179a0c1..37fad198d5 100644
--- a/test_rendering/index.html
+++ b/test_rendering/index.html
@@ -16,7 +16,7 @@
   <script type="text/javascript" src="../node_modules/proj4/dist/proj4.js"></script>
   <script type="text/javascript" src="../node_modules/resemblejs/resemble.js"></script>
   <script type="text/javascript" src="../test/test-extensions.js"></script>
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame"></script>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
   <script>
     mocha.setup({
       ui: 'bdd',