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,72 @@ Changes `<hello-world>Hi There</hello-world>` into:
 <hello-world><h1>Hi There</h1></hello-world>
 ```
 
+In the example above, the child (`<h1>Hi There</h1>`) of the component’s element
+(`<hello-world>`) is treated as its [can-component/content] and rendered
+wherever the `<content />` placeholder is provided in the component’s `view`.
+
+If a component is defined **without** a [can-component.prototype.view] property,
+it will render whatever `LIGHT_DOM` it is given. For example, a component as
+follows:
+
+```js
+Component.extend({
+	tag: "my-el",
+	events: {
+		click: function() {
+			// Fired when the <my-el> element is clicked
+		}
+	}
+});
+```
+
+…used like so:
+
+```html
+<my-el>Here’s my content!</my-el>
+```
+
+…will be rendered as:
+
+```html
+<my-el>Here’s my content!</my-el>
+```
+
+With [can-component.prototype.leakScope] enabled, the component’s ViewModel can
+provide data to the LIGHT_DOM it contains, such that components like this:
+
+```js
+Component.extend({
+	leakScope: true,
+	tag: "my-el",
+	ViewModel: {
+		message: {
+			default: "I’m from my-el",
+		}
+	}
+});
+
+Component.extend({
+	tag: "my-app",
+	view: "<my-el>{{message}}</my-el>",
+	ViewModel: {
+		message: {
+			default: "I’m from my-app",
+		}
+	}
+});
+```
+
+…will be rendered as:
+
+```html
+<my-app>
+  <my-el>
+    I’m from my-el
+  </my-el>
+</my-app>
+```
+
 ### ViewModel
 
 A component’s [can-component::ViewModel ViewModel] defines a constructor that creates
@@ -621,6 +687,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 +758,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 +793,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 +842,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,30 @@ Component.extend( {
 	view: "<h1><content>Hi There!</content></h1>"
 } );
 ```
+
+The children of `<content>` present a `SHADOW_DOM` for rendering in the case that no `LIGHT_DOM` is passed and no `content` is defined.
+
+For example:
+
+```js
+Component.extend( {
+    tag: "my-tag",
+    view: "<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, the children of `<content>` will be ignored such
+that `<my-tag>Hello friend</my-tag>` will render:
+
+```html
+<my-tag><h1>Hello friend</h1></my-tag>
+```
+
+If you need to provide multiple pieces of content to a component, you should use
+[can-component/can-slot] and [can-component/can-template].

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,37 @@ it produces:
 ```html
 <my-greeting><h1>Hello World</h1></my-greeting>
 ```
+
+### Omitting view entirely
+
+If a component does not have a `view` defined,
+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>
+```
+
+The following component:
+
+```js
+Component.extend({
+	tag: "my-greeting",
+	view: "Hello World"
+})
+```
+
+…will render like:
+
+```html
+<my-greeting>Hello World</my-greeting>
+```