diff --git a/libs/components/src/i18n/i18n.component.ts b/libs/components/src/i18n/i18n.component.ts
index 61b1fdb2a05..edf12c5fa1c 100644
--- a/libs/components/src/i18n/i18n.component.ts
+++ b/libs/components/src/i18n/i18n.component.ts
@@ -39,7 +39,7 @@ interface I18nStringPart {
  * </div>
  */
 @Component({
-  selector: "[bit-i18n],bit-i18n",
+  selector: "[bit-i18n]",
   imports: [SharedModule],
   template: `
     <ng-container *ngFor="let part of translationParts">
diff --git a/libs/components/src/i18n/i18n.mdx b/libs/components/src/i18n/i18n.mdx
index 507886c0a8f..977788b385f 100644
--- a/libs/components/src/i18n/i18n.mdx
+++ b/libs/components/src/i18n/i18n.mdx
@@ -6,7 +6,7 @@ import * as stories from "./i18n.stories";
 
 # I18n with Template Wrapping
 
-The `<bit-i18n>` component is an alternative to the `i18n` pipe that supports template wrapping. It
+The `[bit-i18n]` component is an alternative to the `i18n` pipe that supports template wrapping. It
 supports wrapping developer defined tags around parts the translated text. It allows translators to
 translate the original text more accurately and so that it still follows the grammar rules of the
 target language.
@@ -31,7 +31,7 @@ content will be rendered as is.
     "This is an example with <0>link</0> tags and <1>bold</1> tags.
     The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
 -->
-<bit-i18n key="basicExample">
+<div bit-i18n key="basicExample">
   <!-- <0></0> -->
   <a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
   <!-- <1></1> -->
@@ -40,27 +40,7 @@ content will be rendered as is.
   <a *bit-i18n-part="let text" href="#">
     <strong>{{ text }}</strong>
   </a>
-</bit-i18n>
-```
-
-## Attribute Selector Example
-
-You can also use the `bit-i18n` as an attribute to avoid creating an extra element in the DOM.
-
-<Story of={stories.AttributeSelector} />
-
-<br />
-
-### Source
-
-```html
-<!-- otherExample in messages.json
-    "This is another example with <1>bold</1> tags to show that tag order does not matter and the <0>link</0> tags are after."
--->
-<p bit-i18n key="otherExample">
-  <a *bit-i18n-part="let text" href="#">{{ text }}</a>
-  <strong *bit-i18n-part="let text">{{ text }}</strong>
-</p>
+</div>
 ```
 
 ## Missing Template Example
@@ -79,13 +59,13 @@ be rendered as is.
    "This is an example with <0>link</0> tags and <1>bold</1> tags.
    The entire sentence can be <2>translated as a whole</2> and re-arranged according to each language's grammar rules."
 -->
-<bit-i18n key="basicExample">
+<div bit-i18n key="basicExample">
   <!-- <0></0> -->
   <a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
   <!-- <1></1> -->
   <strong *bit-i18n-part="let text">{{ text }}</strong>
   <!-- Missing template for <2></2> -->
-</bit-i18n>
+</div>
 ```
 
 ## Missing Template Example
@@ -102,8 +82,8 @@ You can also pass arguments to the `i18nService.t()` method via the `[args]` inp
 <!-- argExample in messages.json
    `This is an example with <0>link</0> tags and $SOME_ARG$.`
 -->
-<bit-i18n key="argExample" [args]="['passed args']">
+<div bit-i18n key="argExample" [args]="['passed args']">
   <!-- <0></0> -->
   <a *bit-i18n-part="let text" routerLink="./">{{ text }}</a>
-</bit-i18n>
+</div>
 ```
diff --git a/libs/components/src/i18n/i18n.stories.ts b/libs/components/src/i18n/i18n.stories.ts
index c0e5f061012..72a69eab81a 100644
--- a/libs/components/src/i18n/i18n.stories.ts
+++ b/libs/components/src/i18n/i18n.stories.ts
@@ -41,25 +41,13 @@ export const Basic: Story = {
   render: (args) => ({
     props: args,
     template: `
-<bit-i18n key="basicExample">
+<div bit-i18n key="basicExample">
   <a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
   <strong *bit-i18n-part="let text">{{ text }}</strong>
   <a *bit-i18n-part="let text" href="https://localization.blog/2022/05/16/i18n-best-practices-keep-it-together/">
     <strong>{{ text }}</strong>
   </a>
-</bit-i18n>
-    `,
-  }),
-};
-
-export const AttributeSelector: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-<p bit-i18n key="otherExample">
-  <a *bit-i18n-part="let text" href="javascript:;">{{ text }}</a>
-  <strong *bit-i18n-part="let text">{{ text }}</strong>
-</p>
+</div>
     `,
   }),
 };