diff --git a/src/js/with-react.js b/src/js/with-react.js
index 3fb2f51e9b..392f012666 100644
--- a/src/js/with-react.js
+++ b/src/js/with-react.js
@@ -52,8 +52,8 @@ const withReact = (WebComponent, { pure = true, passive = false } = {}) => {
   // hence it's tagName could only be resolved lazily
   // ref: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
   // therefor we don't instantiate it, but rather use a statically defined tagName property
-  const { tagName } = WebComponent;
-  const displayName = `${camelize(tagName)}React`;
+  const { tagName, buildinTagName } = WebComponent;
+  const displayName = `${camelize(buildinTagName || tagName)}React`;
   const Component = pure ? React.PureComponent : React.Component;
 
   return class WebComponentWrapper extends Component {
@@ -150,8 +150,9 @@ const withReact = (WebComponent, { pure = true, passive = false } = {}) => {
     render() {
       // eslint-disable-next-line react/prop-types
       const { props: { children }, handleRef } = this;
+      const is = buildinTagName ? tagName : null;
 
-      return createElement(tagName, { ref: handleRef }, children);
+      return createElement(tagName, { ref: handleRef, is }, children);
     }
   };
 };
diff --git a/stack/tasks/create-a-m-o.js b/stack/tasks/create-a-m-o.js
index aeb369331a..a6a36252f6 100644
--- a/stack/tasks/create-a-m-o.js
+++ b/stack/tasks/create-a-m-o.js
@@ -267,6 +267,7 @@ const writeIndexJs = (path, _name) => {
 
       class ${className} extends ${BaseConstructor} {
         static tagName = 'axa-${_name}'
+        ${isBuiltin ? `static buildinTagName = '${buildinElement}'` : ''}
 
         // specify runtime type-checking here, if you use custom attributes
         // this will also derived your needed observed attributes automatically for you