diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
index 264935889..7c8a9eb60 100644
--- a/src/components/dropdown/dropdown.scss
+++ b/src/components/dropdown/dropdown.scss
@@ -12,7 +12,7 @@
   display: block;
 }
 
-.dropdown__panel-positioner {
+.dropdown__positioner {
   position: absolute;
   z-index: var(--sl-z-index-dropdown);
 }
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index 7fa11e9e7..fd354b41c 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -25,7 +25,7 @@ export class Dropdown {
   componentId = `dropdown-${++id}`;
   isShowing = false;
   panel: HTMLElement;
-  panelPositioner: HTMLElement;
+  positioner: HTMLElement;
   popover: Popover;
   trigger: HTMLElement;
 
@@ -114,7 +114,7 @@ export class Dropdown {
   }
 
   componentDidLoad() {
-    this.popover = new Popover(this.trigger, this.panelPositioner, {
+    this.popover = new Popover(this.trigger, this.positioner, {
       strategy: this.hoist ? 'fixed' : 'absolute',
       placement: this.placement,
       distance: this.distance,
@@ -309,9 +309,9 @@ export class Dropdown {
           <slot name="trigger" />
         </span>
 
-        {/* Position the panel with a wrapper, since the popover uses `translate`. This lets us expose the panel so the
-        user can style it without interfering with the position. */}
-        <div ref={el => (this.panelPositioner = el)} class="dropdown__panel-positioner">
+        {/* Position the panel with a wrapper since the popover makes use of `translate`. This let's us add transitions
+        on the panel without interfering with the position. */}
+        <div ref={el => (this.positioner = el)} class="dropdown__positioner">
           <div
             ref={el => (this.panel = el)}
             part="panel"