diff --git a/componentGenerator/index.mjs b/componentGenerator/index.mjs
index fa7d07a7..681846b2 100644
--- a/componentGenerator/index.mjs
+++ b/componentGenerator/index.mjs
@@ -69,7 +69,6 @@ async function getConfig(configPath) {
  */
 async function enquiry(prompts, cliOptions = {}) {
   const answers = await inquirer.prompt(prompts, cliOptions);
-
   return answers;
 }
 
diff --git a/componentGenerator/templates/tsTemplateBlock.mjs b/componentGenerator/templates/tsTemplateBlock.mjs
index dad8c1bb..32a07b7c 100644
--- a/componentGenerator/templates/tsTemplateBlock.mjs
+++ b/componentGenerator/templates/tsTemplateBlock.mjs
@@ -2,16 +2,25 @@ export default function ({ kebabCase }) {
   return `import { html, render } from 'lit';
 import './${kebabCase}.scss';
 
-const template = () => {
+interface TemplateArgs {
+  heading: string;
+  text: string;
+}
+
+const template = (args: TemplateArgs) => {
+  const { heading, text } = args;
   return html\`
-    <h1>This is a heading.</h1>
-    <p>This is text.</p>
+    <h1>\${heading}</h1>
+    <p>\${text}</p>
   \`;
 };
 
 export default function decorate(block: HTMLElement) {
+  const heading: string = "This is a heading.";
+  const text: string = "This is text.";
+
   block.style.removeProperty('display');
-  render(template(), block);
+  render(template({ heading, text }), block);
 }
 `;
 }
diff --git a/componentGenerator/templates/tsTemplateComponent.mjs b/componentGenerator/templates/tsTemplateComponent.mjs
index 198ba594..ed7f1e1e 100644
--- a/componentGenerator/templates/tsTemplateComponent.mjs
+++ b/componentGenerator/templates/tsTemplateComponent.mjs
@@ -5,6 +5,10 @@ import './${kebabCase}.scss';
 
 @customElement('${kebabCase}')
 export class ${pascalCase} extends LitElement {
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+
   render() {
     return html\`
       <h1>This is a heading.</h1>