New branch

README.md

@@ -171,7 +171,7 @@ Remember to register `ThemeProvider` locally.
 
 Add your `ThemeProvider` component:
 
-```JSX
+```vue
   <theme-provider :theme="{
     primary: 'palevioletred'
   }">
@@ -190,6 +190,21 @@ And into your `Wrapper` component:
   `;
 ```
 
+### HTML Attributes
+
+While creating a styled component you can pass an object that describes html attibutes of this component.
+
+```JSX
+import styled from 'vue-styled-components';
+
+const StyledImage = styled('img', {}, { src: 'image.jpg', alt: 'Test image' })`
+  width: 50px;
+  height: 50px;
+`;
+
+export default StyledImage;
+```
+
 ### Style component constructors as `router-link`
 
 You can style also Vue component constructors as `router-link` from `vue-router` and other components
@@ -230,6 +245,26 @@ const TomatoButton = StyledButton.extend`
 export default TomatoButton;
 ```
 
+### Polymorphic `as` prop
+If you want to keep all the styling you've applied to a component but just switch out what's being ultimately rendered (be it a different HTML tag or a different custom component), you can use the "as" prop to do this at runtime. Another powerful feature of the `as` prop is that it preserves styles if the lowest-wrapped component is a `StyledComponent`.
+
+**Example**
+In `Component.js`
+```js
+//  Renders a div element by default.
+const Component = styled('div', {})``
+```
+Using the `as` prop in another template/component would be as shown below.
+```vue
+<template>
+  <!-- Component will render a button instead of a div -->
+  <Component as="button" color="red">
+    Button
+  </Component>
+</template>
+```
+This sort of thing is very useful in use cases like a navigation bar where some of the items should be links and some just buttons, but all be styled the same way.
+
 ### withComponent
 Let's say you have a `button` and an `a` tag. You want them to share the exact same style. This is achievable with `.withComponent`.
 ```JSX

example/index.html

@@ -75,12 +75,16 @@ <h1>Basic Example</h1>
       background: ${props => props.theme.tertiary};
     `;
 
-    const W3 = styled.default(W2)`
-      &:hover {
-        background: ${props => props.theme.primary};
-      }
+    // Custom Wrapper
+    const W3 = styled.default(Wrapper, {
+      color: String,
+      bg: String
+    })`
+      color: ${props => props.color};
+      background-color: ${props => props.bg};
     `
 
+
     const StyledInput = styled.default.input`
       display: block;
       width: 100%;
@@ -106,19 +110,39 @@ <h1>Basic Example</h1>
       margin: 1.5em 0;
       background-color: ${props => props.theme.primary};
       opacity: ${props => props.visible ? 1: 0};
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.theme.primary};
+      }
     `
 
     const SuperBtn = styled.default(Btn, { visible: Boolean, big: Boolean })`
       font-size: ${props => props.big ? 0.8 : 1}em;
     `
 
+    const CustomBtn = styled.default(Btn, {
+      color: String,
+      bg: String
+    })`
+      color: ${props => props.color};
+      background-color: ${props => props.bg};
+
+      &:focus {
+        outline: none;
+        border: solid 3px ${props => props.color};
+      }
+    `
+
     new Vue({
       el: '#container',
       data: {
         text1: 'Hello World, this is my first styled component!',
         text2: 'Hello World, this is my first styled component!',
         animated1: false,
-        animated2: false
+        animated2: false,
+        element: 'div',
+        setElement: 'div'
       },
       template: `
       <theme-provider :theme="{
@@ -136,18 +160,44 @@ <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"
+        >
+        <custom-title :visible="true">Change Rendered Elements with "as" prop.</custom-title>
+          <h3>Enter any HTML element and see the element rendered by the styled component change 👇🏽</h3>
+          <styled-input @keydown.enter="updateElement" placeholder="Enter an HTML element! Like 'button' or 'section'" v-model="element" />
+          <custom-btn
+            visible
+            :as="setElement"
+            role="button"
+            tabindex="0"
+            color="#42a786"
+            bg="papayawhip"
+            aria-label="Btn rendered as div"
+            @keydown.space="updateElement"
+          >
+            I am the "btn" component rendered as a "{{ setElement }}" using the \`as\` prop! 🎉
+          </custom-btn>
+        </w-3>
       </theme-provider>`,
       components: {
         CustomTitle,
         Wrapper,
         W2,
+        W3,
         H2,
         Btn,
         SuperBtn,
+        CustomBtn,
         SuperCustomTitle,
         StyledInput,
         'theme-provider': styled.ThemeProvider,
       },
+      methods: {
+        updateElement() {
+          this.setElement = this.element
+        }
+      }
     });
     </script>
   </body>