diff --git a/src/compiler/transformers/component-native/add-define-custom-element-function.ts b/src/compiler/transformers/component-native/add-define-custom-element-function.ts
index a74ee1821fc..04c8bd4c48f 100644
--- a/src/compiler/transformers/component-native/add-define-custom-element-function.ts
+++ b/src/compiler/transformers/component-native/add-define-custom-element-function.ts
@@ -143,6 +143,9 @@ const createCustomElementsDefineCase = (tagName: string, actionExpression: ts.Ex
  * Add the main `defineCustomElement` function e.g.
  * ```javascript
  * function defineCustomElement() {
+ *  if (typeof customElements === 'undefined') {
+ *    return;
+ *  }
  *  const components = ['my-component'];
  *   components.forEach(tagName => {
  *     switch (tagName) {
@@ -176,6 +179,13 @@ const addDefineCustomElementFunction = (
     undefined,
     ts.factory.createBlock(
       [
+        ts.factory.createIfStatement(
+          ts.factory.createStrictEquality(
+            ts.factory.createTypeOfExpression(ts.factory.createIdentifier('customElements')),
+            ts.factory.createStringLiteral('undefined')
+          ),
+          ts.factory.createBlock([ts.factory.createReturnStatement()])
+        ),
         ts.factory.createVariableStatement(
           undefined,
           ts.factory.createVariableDeclarationList(
diff --git a/src/compiler/transformers/component-native/native-component.ts b/src/compiler/transformers/component-native/native-component.ts
index 3378524fe3f..c92b5679c11 100644
--- a/src/compiler/transformers/component-native/native-component.ts
+++ b/src/compiler/transformers/component-native/native-component.ts
@@ -27,12 +27,12 @@ const updateNativeHostComponentHeritageClauses = (classNode: ts.ClassDeclaration
     return classNode.heritageClauses;
   }
 
-  if (moduleFile.cmps.length > 1) {
+  if (moduleFile.cmps.length >= 1) {
     addCoreRuntimeApi(moduleFile, RUNTIME_APIS.HTMLElement);
   }
 
-  const heritageClause = ts.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [
-    ts.createExpressionWithTypeArguments([], ts.createIdentifier(HTML_ELEMENT)),
+  const heritageClause = ts.factory.createHeritageClause(ts.SyntaxKind.ExtendsKeyword, [
+    ts.factory.createExpressionWithTypeArguments(ts.factory.createIdentifier(HTML_ELEMENT), []),
   ]);
 
   return [heritageClause];
diff --git a/src/compiler/transformers/test/native-constructor.spec.ts b/src/compiler/transformers/test/native-constructor.spec.ts
index 79ec0f19122..db9fd1e0fad 100644
--- a/src/compiler/transformers/test/native-constructor.spec.ts
+++ b/src/compiler/transformers/test/native-constructor.spec.ts
@@ -37,7 +37,7 @@ describe('nativeComponentTransform', () => {
       const transpiledModule = transpileModule(code, null, compilerCtx, null, [], [transformer]);
 
       expect(transpiledModule.outputText).toContain(
-        `import { attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
+        `import { HTMLElement, attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
       );
       expect(transpiledModule.outputText).toContain(`this.__attachShadow()`);
     });
@@ -62,7 +62,7 @@ describe('nativeComponentTransform', () => {
       const transpiledModule = transpileModule(code, null, compilerCtx, null, [], [transformer]);
 
       expect(transpiledModule.outputText).toContain(
-        `import { attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
+        `import { HTMLElement, attachShadow as __stencil_attachShadow, defineCustomElement as __stencil_defineCustomElement } from "@stencil/core";`
       );
       expect(transpiledModule.outputText).toContain(`this.__attachShadow()`);
     });