diff --git a/spec/VectorBasemapLayerSpec.js b/spec/VectorBasemapLayerSpec.js
index 277b35e..3386422 100644
--- a/spec/VectorBasemapLayerSpec.js
+++ b/spec/VectorBasemapLayerSpec.js
@@ -225,4 +225,71 @@ describe('VectorBasemapLayer', function () {
       expect(attributionUrls[0]).to.equal('https://static.arcgis.com/attribution/Vector/World_Basemap_v2');
     });
   });
+
+  describe('_setupAttribution', function () {
+    it('should add attribution for non itemId item', function () {
+      const key = 'ArcGIS:Streets';
+      const layer = new L.esri.Vector.VectorBasemapLayer(key, {
+        token: apikey
+      });
+      layer._ready = false;
+      let attributionValue = '';
+      const fakeMap = {
+        attributionControl: {
+          _container: { className: '', querySelector: () => {} },
+          addAttribution: function () {
+            attributionValue = arguments[0];
+          }
+        },
+        getSize: function () {
+          return { x: 0, y: 0 };
+        },
+        on: function () {}
+      };
+      layer.onAdd(fakeMap);
+      layer._setupAttribution();
+      expect(attributionValue).to.be.equal('<span class="esri-dynamic-attribution"></span>');
+    });
+
+    it('should add attribution for itemId item', function () {
+      const key = '3e1a00aeae81496587988075fe529f71';
+      const layer = new L.esri.Vector.VectorBasemapLayer(key, {
+        token: apikey
+      });
+      layer._ready = false;
+      let attributionValue = '?';
+      const fakeMap = {
+        attributionControl: {
+          _container: { className: '', querySelector: () => {} },
+          addAttribution: function () {
+            console.warn('addAttribution', arguments);
+            attributionValue = arguments[0];
+          }
+        },
+        getSize: function () {
+          return { x: 0, y: 0 };
+        },
+        on: function () {}
+      };
+      layer.onAdd(fakeMap);
+      layer._maplibreGL.getMaplibreMap = function () {
+        return {
+          style: {
+            stylesheet: {
+              sources: {
+                one: {
+                  attribution: '@ my attribution',
+                  copyrightText: '@ my copyright text'
+                }
+              }
+            }
+          }
+        };
+      };
+
+      layer._setupAttribution();
+      const expectedAttributionValue = '<span class="esri-dynamic-attribution">@ my attribution, @ my copyright text</span>';
+      expect(attributionValue).to.be.equal(expectedAttributionValue);
+    });
+  });
 });
diff --git a/src/VectorBasemapLayer.js b/src/VectorBasemapLayer.js
index fb3e9ae..891cacc 100644
--- a/src/VectorBasemapLayer.js
+++ b/src/VectorBasemapLayer.js
@@ -73,7 +73,7 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
         }
       });
 
-      this._map.attributionControl.addAttribution('<span class="">' + allAttributions.join(', ') + '</span>');
+      this._map.attributionControl.addAttribution(`<span class="esri-dynamic-attribution">${allAttributions.join(', ')}</span>`);
     } else {
       // this is an enum
       if (!this.options.attributionUrls) {
@@ -142,8 +142,11 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
 
       if (element && element.length > 0) {
         const vectorAttribution = element[0].outerHTML;
-        // this doesn't work, not sure why.
+        // call removeAttribution twice here
+        // this is needed due to the 2 different ways that addAttribution is called inside _setupAttribution.
+        // leaflet attributionControl.removeAttribution method ignore a call when the attribution sent is not present there
         map.attributionControl.removeAttribution(vectorAttribution);
+        map.attributionControl.removeAttribution('<span class="esri-dynamic-attribution"></span>');
       }
     }
   },