diff --git a/README.md b/README.md
index bb47c91..3cdfd75 100644
--- a/README.md
+++ b/README.md
@@ -138,11 +138,12 @@ You have multiple options for development.
 ## Development sample
 
 Component
+
 ```ts
 class TitleComponent extends BaseComponent {
   constructor() {
     super();
-    this._shadowRoot.innerHTML = `<h1>Title: Sample</h1>`;
+    this._dom.innerHTML = `<h1>Title: Sample</h1>`;
   }
 
   onInit() { ... }
@@ -152,4 +153,3 @@ class TitleComponent extends BaseComponent {
 customElements.define("title-component", TitleComponent);
 export default TitleComponent;
 ```
-
diff --git a/src/app/features/error/presentation/error.component.ts b/src/app/features/error/presentation/error.component.ts
index 86e3b43..e1839ae 100644
--- a/src/app/features/error/presentation/error.component.ts
+++ b/src/app/features/error/presentation/error.component.ts
@@ -5,7 +5,7 @@ import BaseComponent from "@infrastructure/base-component/base.component";
 export class ErrorComponent extends BaseComponent {
   constructor() {
     super();
-    this._shadowRoot.innerHTML = `<style>${style}</style>${template}`;
+    this._dom.innerHTML = `<style>${style}</style>${template}`;
   }
 }
 
diff --git a/src/app/features/showcase/presentation/showcase.component.ts b/src/app/features/showcase/presentation/showcase.component.ts
index 57a8fe9..8c77700 100644
--- a/src/app/features/showcase/presentation/showcase.component.ts
+++ b/src/app/features/showcase/presentation/showcase.component.ts
@@ -4,7 +4,7 @@ import "@infrastructure/ui-components/atoms/input/input.component";
 import { ShowcaseData } from "@showcase/domain/entities/showcase.entity";
 import GetShowcase from "@showcase/domain/usecases/get-showcase.usecase";
 import style from "@showcase/presentation/showcase.component.css";
-import template from "@showcase/presentation/showcase.component.html";
+import html from "@showcase/presentation/showcase.component.html";
 
 /**
  * [ShowcaseComponent] Component to display UI samples
@@ -16,7 +16,7 @@ class ShowcaseComponent extends BaseComponent {
 
   constructor(getShowcase?: GetShowcase) {
     super();
-    this._shadowRoot.innerHTML = `<style>${style}</style>${template}`;
+    this._dom.innerHTML = `<style>${style}</style>${html}`;
     this._getShowcase = getShowcase || null;
   }
 
@@ -40,7 +40,7 @@ class ShowcaseComponent extends BaseComponent {
    * Render the table with the data
    */
   private renderTable(): void {
-    const tbody = this._shadowRoot.querySelector("tbody");
+    const tbody = this._dom.querySelector("tbody");
     if (tbody) {
       tbody.innerHTML = this._apiData
         .map(
@@ -59,7 +59,7 @@ class ShowcaseComponent extends BaseComponent {
   }
 
   private displayError(message: string) {
-    this._shadowRoot.innerHTML = `<h1>Error: ${message}</h1>`;
+    this._dom.innerHTML = `<h1>Error: ${message}</h1>`;
   }
 
   private navigateToErrorPage() {
diff --git a/src/app/infrastructure/base-component/base.component.ts b/src/app/infrastructure/base-component/base.component.ts
index 81a008e..b160cdf 100644
--- a/src/app/infrastructure/base-component/base.component.ts
+++ b/src/app/infrastructure/base-component/base.component.ts
@@ -3,11 +3,11 @@
  */
 export default class BaseComponent extends HTMLElement {
   /** [BaseComponent] Shadow root of the element */
-  protected _shadowRoot: ShadowRoot;
+  protected _dom: ShadowRoot;
 
   constructor() {
     super();
-    this._shadowRoot = this.attachShadow({ mode: "open" });
+    this._dom = this.attachShadow({ mode: "open" });
   }
 
   connectedCallback() {