docs(as prop): added docs for as prop anding

Author: codebender828

example/index.html

@@ -150,6 +150,7 @@ <h1>Basic Example</h1>
         secondary: 'papayawhip',
         tertiary: 'lavenderblush'
       }">
+      <!--
         <wrapper>
           <custom-title :visible="true" :animate="animated1"> {{text1}} </custom-title>
           <styled-input v-model="text1" />
@@ -160,6 +161,7 @@ <h1>Basic Example</h1>
           <styled-input v-model="text2" />
           <super-btn visible @click="animated2 = !animated2"> An extension of Styled Button </super-btn>
         </w-2>
+        -->
         <w-3
           bg="#c6f7e6"
         >

src/models/StyledComponent.js

@@ -1,5 +1,6 @@
 import css from '../constructors/css'
 import normalizeProps from '../utils/normalizeProps'
+import isVueComponent from '../utils/isVueComponent'
 
 export default (ComponentStyle) => {
   const createStyledComponent = (target, rules, props) => {
@@ -39,7 +40,19 @@ export default (ComponentStyle) => {
         }
 
         return createElement(
-          this.$props.as || target,
+          /**
+           * The reason for this check is to test whether the "target" is a Vue / Styled component.
+           * If the target is a styled component, we render that styled component to preserve the
+           * styles inherited from the "target" in the new component to be rendered.
+           *
+           * The "target" will inherently possess the "as" polymorphic prop. This allows the
+           * consumer component to render the tag passed inside of it's "as" element it's
+           * rendering recursively.
+           *
+           * Otherwise if the "target" is not a styled component we render the "as" prop element.
+           * If the "as" prop is not provided, we use the default element.
+           */
+          isVueComponent(target) ? target : this.$props.as || target,
           {
             class: [this.generatedClassName],
             props: this.$props,