General documentation fixes (link to parent: CanJS#4116, Component#264, and Component#270)

docs/ViewModel.md

@@ -244,6 +244,7 @@ reference to the viewModel instance and modify it. This can be seen in the
 following example:
 
 @demo demos/can-component/accordion.html
+@codepen
 
 Clicking the __Change title__ button sets a `<my-panel>` element’s `title`
 attribute like:
@@ -286,6 +287,7 @@ Component.extend( {
 ViewModel methods get called back with the current context, the element that you are listening to and the event that triggered the callback.
 
 @demo demos/can-component/paginate_next.html
+@codepen
 
 ## Publishing events on ViewModels
 
@@ -317,3 +319,4 @@ The following demo uses this ability to create a close button that
 hides the player editor:
 
 @demo demos/can-component/paginate_next_event.html
+@codepen

docs/component.md

@@ -189,7 +189,7 @@ document.body.appendChild( renderer( { } ) );
 Check this out here:
 
 @demo demos/can-component/click_me.html
-
+@codepen
 
 Typically, you do not append a single component at a time.  Instead,
 you’ll render a view with many custom tags like:
@@ -273,6 +273,36 @@ Changes `<hello-world>Hi There</hello-world>` into:
 <hello-world><h1>Hi There</h1></hello-world>
 ```
 
+Essentially, the children of the component tag will be treated as it's [can-component/content], 
+to be rendered wherever the tag is provided in the component view.
+
+If no view is provided to a Component, it will render it's content naively.
+
+A component like this:
+
+```js
+Component.extend({
+  tag: "can-el",
+  ViewModel: {
+    hovMessage: {
+        default: "I'm from can-el viewModel",
+    }
+  }
+});
+```
+
+Can be rendered like: `<can-el>Here's my content!</can-el>` into exactly what it looks like:
+
+```html
+<can-el>Here's my content!</can-el>
+```
+
+or you can render viewModel properties using magic tags like : `<can-el>{{hovMessage}}</can-el>`, which renders like:
+
+```html
+<can-el>I'm from can-el viewModel</can-el>
+```
+
 ### ViewModel
 
 A component’s [can-component::ViewModel ViewModel] defines a constructor that creates
@@ -621,6 +651,8 @@ This would make `helloWorldInstance.element` a fragment with the following struc
 <hello-world>Hello <em>mundo</em></hello-world>
 ```
 
+
+
 ### scope
 
 You can also provide a `scope` with which the content should be rendered:
@@ -690,6 +722,7 @@ The following demos a tabs widget.  Click “Add Vegetables”
 to add a new tab.
 
 @demo demos/can-component/tabs.html
+@codepen
 
 An instance of the tabs widget is created by creating `<my-tabs>` and `<my-panel>`
 elements like:
@@ -724,6 +757,7 @@ vm.addPanel( this.viewModel );
 The following tree combo lets people walk through a hierarchy and select locations.
 
 @demo demos/can-component/treecombo.html
+@codepen
 
 The secret to this widget is the viewModel’s `breadcrumb` property, which is an array
 of items the user has navigated through, and `selectableItems`, which represents the children of the
@@ -772,6 +806,7 @@ The following example shows 3
 widget-like components: a grid, next / prev buttons, and a page count indicator. And, it shows an application component that puts them all together.
 
 @demo demos/can-component/paginate.html
+@codepen
 
 This demo uses a `Paginate` [can-define/map/map] to assist with maintaining a paginated state:
 

docs/content.md

@@ -35,3 +35,29 @@ Component.extend( {
 	view: "<h1><content>Hi There!</content></h1>"
 } );
 ```
+
+The children of `<content>` can be used as a default value for rendering in the case that no content is passed.
+
+for example: 
+```js
+Component.extend( {
+    tag: "my-tag",
+    view: stache( "<h1><content>Hello world</content></h1>" )
+} );
+```
+
+used like `<my-tag></my-tag>`
+
+will render:
+
+```html
+<my-tag><h1>Hello world</h1></my-tag>
+```
+
+When the content is specified, those children will be ignored: 
+
+`<my-tag>Hello friend</my-tag>` will render:
+
+```html
+<my-tag><h1>Hello friend</h1></my-tag>
+```

docs/events.md

@@ -45,11 +45,13 @@ while still accessing the `Component`’s [can-component::ViewModel].  The follo
 example listens to clicks on elements with `className="next"` and calls `.next()` on the component’s viewModel.
 
 @demo demos/can-component/paginate_events_next.html
+@codepen
 
 The events object can also listen to objects or properties on the component’s [can-component::ViewModel] instance. For instance, instead
 of using live-binding, we could listen to when offset changes and update the page manually:
 
 @demo demos/can-component/paginate_events_next_update_page.html
+@codepen
 
 ### Special events: inserted and removed
 

docs/helpers.md

@@ -19,3 +19,4 @@ uses an `isSelected` helper to render content for selected items. Click
 one of the following libraries to toggle them within the `selected` array.
 
 @demo demos/can-component/selected.html
+@codepen

docs/view.md

@@ -48,6 +48,7 @@ There are three things to understand about a [can-component]’s view:
 The following example demonstrates all three features:
 
 @demo demos/can-component/my_greeting_full.html
+@codepen
 
 The following explains how each part works:
 
@@ -211,3 +212,38 @@ it produces:
 ```html
 <my-greeting><h1>Hello World</h1></my-greeting>
 ```
+
+### Omitting view entirely
+
+If the user does not provide a view property,
+the content -whether defined or passed inline, will be rendered instead.
+
+This means a component like this:
+
+```js
+Component.extend({
+	tag: "my-greeting",
+})
+```
+
+will cause `<my-greeting>Hello Friend</my-greeting>` to render like:
+
+```html
+<my-greeting>Hello Friend</my-greeting>
+```
+
+and 
+
+```js
+Component.extend({
+	tag: "my-greeting",
+	content: "Hello World"
+})
+```
+
+to render like:
+
+
+```html
+<my-greeting>Hello World</my-greeting>
+```