From 78a89157a2600dcac25bad8cc85a45d4191df506 Mon Sep 17 00:00:00 2001
From: Rene Haas <king-sora@hotmail.de>
Date: Wed, 9 Nov 2022 17:44:57 +0100
Subject: [PATCH] change initialization bridging attribute name to prevent
 frameworks to change it back to empty

---
 README.md                                                   | 2 +-
 .../src/overlayscrollbars.component.ts                      | 2 +-
 .../src/OverlayScrollbarsComponent.tsx                      | 2 +-
 .../src/OverlayScrollbarsComponent.vue                      | 2 +-
 packages/overlayscrollbars/README.md                        | 2 +-
 packages/overlayscrollbars/src/styles/structure.scss        | 6 +++---
 website/src/pages/_document.tsx                             | 4 ++--
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 7374f2a..fa1e534 100644
--- a/README.md
+++ b/README.md
@@ -103,7 +103,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
 If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
 While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. 
 
-To fix this behavior apply the `data-overlayscrollbars=""` attribute to the target element (and `html` element if the target element is `body`).
+To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
 
 ### Initialization with an Object
 <details>
diff --git a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts b/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts
index 24fde99..d78635a 100644
--- a/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts
+++ b/packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts
@@ -30,7 +30,7 @@ const mergeEventListeners = (emits: EventListeners, events: EventListeners) =>
 
 @Component({
   selector: 'overlay-scrollbars, [overlay-scrollbars]', // https://angular.io/guide/styleguide#component-selectors
-  host: { 'data-overlayscrollbars': '' },
+  host: { 'data-overlayscrollbars-initialize': '' },
   template: `<div overlayScrollbars [options]="options" [events]="mergeEvents(events)" #content>
     <ng-content></ng-content>
   </div>`,
diff --git a/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx b/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx
index b79dc93..fe9f4f5 100644
--- a/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx
+++ b/packages/overlayscrollbars-react/src/OverlayScrollbarsComponent.tsx
@@ -60,7 +60,7 @@ const OverlayScrollbarsComponent = <T extends keyof JSX.IntrinsicElements>(
 
   return (
     // @ts-ignore
-    <Tag data-overlayscrollbars="" {...other} ref={elementRef}>
+    <Tag data-overlayscrollbars-initialize="" {...other} ref={elementRef}>
       <div ref={childrenRef}>{children}</div>
     </Tag>
   );
diff --git a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
index f6ebaee..030294a 100644
--- a/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
+++ b/packages/overlayscrollbars-vue/src/OverlayScrollbarsComponent.vue
@@ -88,7 +88,7 @@ watch(
 </script>
 
 <template>
-  <component :is="element" ref="elementRef" data-overlayscrollbars="">
+  <component data-overlayscrollbars-initialize="" :is="element" ref="elementRef">
     <div ref="slotRef">
       <slot></slot>
     </div>
diff --git a/packages/overlayscrollbars/README.md b/packages/overlayscrollbars/README.md
index 7374f2a..fa1e534 100644
--- a/packages/overlayscrollbars/README.md
+++ b/packages/overlayscrollbars/README.md
@@ -103,7 +103,7 @@ const osInstance = OverlayScrollbars(document.querySelector('#myElement'), {});
 If you initialize OverlayScrollbars it needs a few milliseconds to create and append all the elements to the DOM.
 While this period the native scrollbars are still visible and are switched out after the initialization is finished. This is perceived as flickering. 
 
-To fix this behavior apply the `data-overlayscrollbars=""` attribute to the target element (and `html` element if the target element is `body`).
+To fix this behavior apply the `data-overlayscrollbars-initialize` attribute to the target element (and `html` element if the target element is `body`).
 
 ### Initialization with an Object
 <details>
diff --git a/packages/overlayscrollbars/src/styles/structure.scss b/packages/overlayscrollbars/src/styles/structure.scss
index d3d29da..7d70229 100644
--- a/packages/overlayscrollbars/src/styles/structure.scss
+++ b/packages/overlayscrollbars/src/styles/structure.scss
@@ -61,15 +61,15 @@
 .os-viewport {
   -ms-overflow-style: scrollbar !important;
 }
-[data-overlayscrollbars=''],
+[data-overlayscrollbars-initialize],
 [data-overlayscrollbars~='scrollbarHidden'],
 html.os-viewport-scrollbar-hidden,
 .os-viewport-scrollbar-hidden.os-environment,
 .os-viewport-scrollbar-hidden.os-viewport {
   scrollbar-width: none !important;
 }
-[data-overlayscrollbars='']::-webkit-scrollbar,
-[data-overlayscrollbars='']::-webkit-scrollbar-corner,
+[data-overlayscrollbars-initialize]::-webkit-scrollbar,
+[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar,
 [data-overlayscrollbars~='scrollbarHidden']::-webkit-scrollbar-corner,
 html.os-viewport-scrollbar-hidden::-webkit-scrollbar,
diff --git a/website/src/pages/_document.tsx b/website/src/pages/_document.tsx
index c17d758..930af79 100644
--- a/website/src/pages/_document.tsx
+++ b/website/src/pages/_document.tsx
@@ -1,9 +1,9 @@
 import { Html, Head, Main, NextScript } from 'next/document';
 
 const Document = () => (
-  <Html lang="en" data-overlayscrollbars="">
+  <Html lang="en" data-overlayscrollbars-initialize="">
     <Head />
-    <body data-overlayscrollbars="">
+    <body data-overlayscrollbars-initialize="">
       <Main />
       <NextScript />
     </body>