diff --git a/.travis.yml b/.travis.yml
index 568be36..0493b3f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -15,7 +15,7 @@ deploy:
       I+oNEP2jfHBxU8FQ4k45YtJrLLrQqPiekV5NxoMEAgj5uelulVVipWz5qG+h/eXnscOkt0OUrsHf6T5IC4uKrd9RwM5R5txavNETFElTHaBjqJJpQiv8quTUrOjsnSQqFnjG7BL/gxWeMVSmUSXThLxCov6QFIjJSTb1Jk26q108gbCNk8kjP667RejUkFeqCXzsFmf8JTSwzmHo7M6ZuRH1/HRl4/Gx9yZCeMAzWvyTysKHqigJbLGmNBZRmbMJQJTvkqeO6J5RGjZ7TBhJ2IT9I2F9YMrjEUAN/71MgUk8ftgDs5GJpSECJIqu5cjeASXgNmlMQ6801UNiYq5X1yJOOxCw5VDwSctrOjUSQOpGnfzetjS6viDAjAbqHTNBdzQuyeLec0iXCB7GGE9qVrxlmhCm/g6bESokWIsMCj+Zz3IgpjUqP/8nHscEWkCk2I5YVsDN5TzEQL4SP1+Fi78f4tWMjwPCC8do2ZcVSB83ez69GDQh/r6Hax0KrGa+1aNdu4DP9BvFp4/cnEBwLuMMVNe0i5zGziSAxHslzo9VQc64kcYmOlAaTu82gSM+cC5+nznbh+8oihUjNLtaTlharTBOFFxs/7v35CW29YP82GzvzuiOqAqWNiZoa1EVmXurNNfcr2ToCEUKD894LqU5ItsTvzFO2jw4mwJRXFE=
   'on':
     tags: true
-    repo: canjs/can-stache-define-element
+    repo: canjs/can-stache-element
   skip_cleanup: true
 dist: xenial
 services:
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0cc9e77..b84ad2e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,4 @@
-# Contributing to can-stache-define-element
+# Contributing to can-stache-element
 
 Check out the [contribution guide on CanJS.com](https://canjs.com/doc/guides/contribute.html) for information on:
 
@@ -13,7 +13,7 @@ The rest of this guide has information that’s specific to this repository.
 
 ## Developing Locally
 
-This section will walk you through setting up the [repository](https://github.com/canjs/can-stache-define-element) on your computer.
+This section will walk you through setting up the [repository](https://github.com/canjs/can-stache-element) on your computer.
 
 ### Signing up for GitHub
 
@@ -23,14 +23,14 @@ If you don’t already have a GitHub account, you’ll need to [create a new one
 
 A “fork” is a copy of a repository in your personal GitHub account. “Cloning” is the process of getting the repository’s source code on your computer.
 
-GitHub has a guide for [forking a repo](https://help.github.com/articles/fork-a-repo/). To fork can-stache-define-element, you can start by going to its [fork page](https://github.com/canjs/can-stache-define-element/fork).
+GitHub has a guide for [forking a repo](https://help.github.com/articles/fork-a-repo/). To fork can-stache-element, you can start by going to its [fork page](https://github.com/canjs/can-stache-element/fork).
 
 Next, you’ll want to clone the repo. [GitHub’s cloning guide](https://help.github.com/articles/cloning-a-repository/) explains how to do this on Linux, Mac, or Windows.
 
 GitHub’s guide will [instruct you](https://help.github.com/articles/fork-a-repo/#step-2-create-a-local-clone-of-your-fork) to clone it with a command like:
 
 ```shell
-git clone https://github.com/YOUR-USERNAME/can-stache-define-element
+git clone https://github.com/YOUR-USERNAME/can-stache-element
 ```
 
 Make sure you replace `YOUR-USERNAME` with your GitHub username.
@@ -44,7 +44,7 @@ First, make sure you’ve [installed Node.js and npm](https://docs.npmjs.com/get
 If you just cloned the repo from the command line, you’ll want to switch to the folder with your clone:
 
 ```shell
-cd can-stache-define-element
+cd can-stache-element
 ```
 
 Next, install the project’s dependencies with npm:
diff --git a/docs/can-stache-define-element.md b/docs/can-stache-element.md
similarity index 59%
rename from docs/can-stache-define-element.md
rename to docs/can-stache-element.md
index 889232b..11db27c 100644
--- a/docs/can-stache-define-element.md
+++ b/docs/can-stache-element.md
@@ -1,38 +1,38 @@
-@module {function} can-stache-define-element
+@module {function} can-stache-element
 @parent can-views
 @collection can-ecosystem
-@group can-stache-define-element/static 0 static
-@group can-stache-define-element/lifecycle-methods 1 lifecycle methods
-@group can-stache-define-element/lifecycle-hooks 2 lifecycle hooks
-@alias can.StacheDefineElement
+@group can-stache-element/static 0 static
+@group can-stache-element/lifecycle-methods 1 lifecycle methods
+@group can-stache-element/lifecycle-hooks 2 lifecycle hooks
+@alias can.StacheElement
 @package ../package.json
 @outline 2
 
-@description Create a custom element with [can-define-object DefineObject]-like properties and [can-stache stache views].
+@description Create a custom element with [can-define-object ObservableObject]-like properties and [can-stache stache views].
 
-@signature `StacheDefineElement`
+@signature `StacheElement`
 
-  `can-stache-define-element` exports a `StacheDefineElement` class used to define custom elements.
+  `can-stache-element` exports a `StacheElement` class used to define custom elements.
 
-  Extend `StacheDefineElement` with a:
+  Extend `StacheElement` with a:
 
   - `static view` - A [can-stache stache] view.
-  - `static define` - [can-define-object DefineObject]-like property definitions.
+  - `static props` - [can-define-object ObservableObject]-like property definitions.
   - getters, setters, and methods.
-  - lifecycle hooks - [can-stache-define-element/lifecycle-hooks.connected] and [can-stache-define-element/lifecycle-hooks.disconnected].
+  - lifecycle hooks - [can-stache-element/lifecycle-hooks.connected] and [can-stache-element/lifecycle-hooks.disconnected].
 
   The following defines a  `<count-er>` element:
 
   ```html
   <count-er></count-er>
   <script type="module">
-  import { StacheDefineElement } from "can/everything";
-  class Counter extends StacheDefineElement {
+  import { StacheElement } from "can/everything";
+  class Counter extends StacheElement {
 	  static view = `
 		  Count: <span>{{this.count}}</span>
 		  <button on:click="this.increment()">+1</button>
 	  `;
-	  static define = {
+	  static props = {
 		  count: 0
 	  };
 	  increment() {
@@ -66,17 +66,17 @@
 
 ## Basic Use
 
-The following sections cover everything you need to create a custom element with `StacheDefineElement`.
+The following sections cover everything you need to create a custom element with `StacheElement`.
 
-### Defining a custom element with a StacheDefineElement constructor
+### Defining a custom element with a StacheElement constructor
 
-In order to create a basic custom element with `StacheDefineElement`, create a class that extends `StacheDefineElement` and call [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) with the tag for the element and the constructor:
+In order to create a basic custom element with `StacheElement`, create a class that extends `StacheElement` and call [customElements.define](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define) with the tag for the element and the constructor:
 
 ```html
 <count-er></count-er>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 }
 customElements.define("count-er", Counter);
 </script>
@@ -88,15 +88,15 @@ This custom element can be used by putting a `<count-er></count-er>` tag in an H
 
 ### Defining an element's view
 
-StacheDefineElement uses [can-stache] to render live-bound HTML as the element's innerHTML.
+StacheElement uses [can-stache] to render live-bound HTML as the element's innerHTML.
 
-To create a [can-stache] view for the element, add a [can-stache-define-element/static.view static view] property to the class:
+To create a [can-stache] view for the element, add a [can-stache-element/static.view static view] property to the class:
 
 ```html
 <count-er></count-er>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		Count: <span>{{this.count}}</span>
 		<button on:click="this.increment()">+1</button>
@@ -112,20 +112,20 @@ The element's HTML will automatically update when any of the element's propertie
 
 ### Defining an element's properties
 
-To manage the logic and state of an element, [can-define-object DefineObject]-like property definitions can be added to explicitly configure how an element's properties are defined.
+To manage the logic and state of an element, [can-define-object ObservableObject]-like property definitions can be added to explicitly configure how an element's properties are defined.
 
-To add property definitions, add a [can-stache-define-element/static.define static define] object to the class:
+To add property definitions, add a [can-stache-element/static.props static props] object to the class:
 
 ```html
 <count-er></count-er>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		Count: <span>{{this.count}}</span>
 		<button on:click="this.increment()">+1</button>
 	`;
-	static define = {
+	static props = {
 		count: 6
 	};
 }
@@ -142,13 +142,13 @@ Methods (as well as getters and setters) can be added to the class body as well:
 ```html
 <count-er></count-er>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		Count: <span>{{this.count}}</span>
 		<button on:click="this.increment()">+1</button>
 	`;
-	static define = {
+	static props = {
 		count: 6
 	};
 	increment() {
@@ -163,19 +163,19 @@ customElements.define("count-er", Counter);
 
 ### Lifecycle hooks
 
-If needed, [can-stache-define-element/lifecycle-hooks.connected] and [can-stache-define-element/lifecycle-hooks.disconnected] lifecycle hooks can be added to the class body. These will be called when the element is added and removed from the page, respectively.
+If needed, [can-stache-element/lifecycle-hooks.connected] and [can-stache-element/lifecycle-hooks.disconnected] lifecycle hooks can be added to the class body. These will be called when the element is added and removed from the page, respectively.
 
 ```html
 <button id="add">Add Timer</button>
 <button id="remove">Remove Timer</button>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 
-class Timer extends StacheDefineElement {
+class Timer extends StacheElement {
 	static view = `
 		<p>{{this.time}}</p>
 	`;
-	static define = {
+	static props = {
 		time: { type: Number, default: 0 },
 		timerId: Number
 	};
@@ -213,33 +213,33 @@ Custom elements have [lifecycle methods](https://developer.mozilla.org/en-US/doc
 - `connectedCallback` is called when the element is added to the page
 - `disconnectedCallback` is called when the element is removed from the page
 
-StacheDefineElement uses the custom element lifecycle methods to initiate its own lifecycle.
+StacheElement uses the custom element lifecycle methods to initiate its own lifecycle.
 
 The `connectedCallback` will call:
 
-1. [can-stache-define-element/lifecycle-methods.initialize] - to set up the element's properties
-2. [can-stache-define-element/lifecycle-methods.render] - to create the innerHTML of the element
-3. [can-stache-define-element/lifecycle-methods.connect] - to connect the element to the DOM
+1. [can-stache-element/lifecycle-methods.initialize] - to set up the element's properties
+2. [can-stache-element/lifecycle-methods.render] - to create the innerHTML of the element
+3. [can-stache-element/lifecycle-methods.connect] - to connect the element to the DOM
 
 The `disconnectedCallback` will call:
 
-1. [can-stache-define-element/lifecycle-methods.disconnect] - to clean up event handlers and call teardown functions
+1. [can-stache-element/lifecycle-methods.disconnect] - to clean up event handlers and call teardown functions
 
-StacheDefineElement's lifecycle methods can be used to test each part of the lifecycle. The following sections explain how to do this.
+StacheElement's lifecycle methods can be used to test each part of the lifecycle. The following sections explain how to do this.
 
 ### Testing an element's properties and methods
 
-To test an element's properties and methods, call the [can-stache-define-element/lifecycle-methods.initialize] method with any initial property values:
+To test an element's properties and methods, call the [can-stache-element/lifecycle-methods.initialize] method with any initial property values:
 
 
 ```js
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		Count: <span>{{this.count}}</span>
 		<button on:click="this.increment()">+1</button>
 	`;
-	static define = {
+	static props = {
 		count: 6
 	};
 	increment() {
@@ -260,16 +260,16 @@ counter.count === 21; // -> true
 
 ### Testing an element's view
 
-To test an element's view, call the [can-stache-define-element/lifecycle-methods.render] method with any initial property values:
+To test an element's view, call the [can-stache-element/lifecycle-methods.render] method with any initial property values:
 
 ```js
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		Count: <span>{{this.count}}</span>
 		<button on:click="this.increment()">+1</button>
 	`;
-	static define = {
+	static props = {
 		count: 6
 	};
 	increment() {
@@ -290,16 +290,16 @@ counter.firstElementChild.innerHTML === "21"; // -> true
 
 ### Testing an element's lifecycle hooks
 
-To test the functionality of the `connected` or `disconnected` hooks, you can call the [can-stache-define-element/lifecycle-methods.connect] or [can-stache-define-element/lifecycle-methods.disconnect] method.
+To test the functionality of the `connected` or `disconnected` hooks, you can call the [can-stache-element/lifecycle-methods.connect] or [can-stache-element/lifecycle-methods.disconnect] method.
 
 ```js
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 
-class Timer extends StacheDefineElement {
+class Timer extends StacheElement {
 	static view = `
 		<p>{{this.time}}</p>
 	`;
-	static define = {
+	static props = {
 		time: { type: Number, default: 0 },
 		timerId: Number
 	};
diff --git a/docs/connect.md b/docs/connect.md
index eb6a242..1134c91 100644
--- a/docs/connect.md
+++ b/docs/connect.md
@@ -1,20 +1,20 @@
-@function can-stache-define-element/lifecycle-methods.connect connect
-@parent can-stache-define-element/lifecycle-methods 3
+@function can-stache-element/lifecycle-methods.connect connect
+@parent can-stache-element/lifecycle-methods 3
 
-@description Connect a `StacheDefineElement` instance to the DOM.
+@description Connect a `StacheElement` instance to the DOM.
 
 @signature `connect(props)`
 
-  Calling `connect` will [can-stache-define-element/lifecycle-methods.initialize] and [can-stache-define-element/lifecycle-methods.render] an element and call its [can-stache-define-element/lifecycle-hooks.connected] hook. Normally this is called by the [can-stache-define-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
+  Calling `connect` will [can-stache-element/lifecycle-methods.initialize] and [can-stache-element/lifecycle-methods.render] an element and call its [can-stache-element/lifecycle-hooks.connected] hook. Normally this is called by the [can-stache-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  static view = `
 		  <p>{{this.age}}</p>
 	  `;
-	  static define = {
+	  static props = {
 		  age: { type: Number, default: 30 }
 	  };
 	  connected() {
@@ -46,8 +46,8 @@ For testing purposes or integration with other libraries, `connect` can be calle
 
 The first time `connect` is called, it will:
 
-- [can-stache-define-element/lifecycle-methods.initialize] the element with the property values passed to `connect`.
-- [can-stache-define-element/lifecycle-methods.render] the stache view into the element.
-- call the [can-stache-define-element/lifecycle-hooks.connected] lifecycle hook.
+- [can-stache-element/lifecycle-methods.initialize] the element with the property values passed to `connect`.
+- [can-stache-element/lifecycle-methods.render] the stache view into the element.
+- call the [can-stache-element/lifecycle-hooks.connected] lifecycle hook.
 
 Subsequent calls to `connect` will not have any effect.
diff --git a/docs/connected.md b/docs/connected.md
index 68d140d..c28edc4 100644
--- a/docs/connected.md
+++ b/docs/connected.md
@@ -1,22 +1,22 @@
-@function can-stache-define-element/lifecycle-hooks.connected connected
-@parent can-stache-define-element/lifecycle-hooks
+@function can-stache-element/lifecycle-hooks.connected connected
+@parent can-stache-element/lifecycle-hooks
 
 @description A lifecycle hook called after the element is inserted into the document.
 
 @signature `connected()`
 
-  The `connected` hook is called by the [can-stache-define-element/lifecycle-methods.connectedCallback] when an element is added to the page. Code that needs to run when the element is in the page should be put in `connected` so that you do not need to worry about the rest of the lifecycle (you do not need to use `super` when implementing `connected`). The following example uses `connected` to increment a timer every second and returns a teardown function to clean up the timer:
+  The `connected` hook is called by the [can-stache-element/lifecycle-methods.connectedCallback] when an element is added to the page. Code that needs to run when the element is in the page should be put in `connected` so that you do not need to worry about the rest of the lifecycle (you do not need to use `super` when implementing `connected`). The following example uses `connected` to increment a timer every second and returns a teardown function to clean up the timer:
 
   ```html
   <time-er></time-er>
   <script type="module">
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class Timer extends StacheDefineElement {
+  class Timer extends StacheElement {
 	  static view = `
 		  <p>{{this.time}}</p>
 	  `;
-	  static define = {
+	  static props = {
 		  time: { type: Number, default: 0 }
 	  };
 	  connected() {
@@ -34,4 +34,4 @@
   ```
   @codepen
 
-  @return {Function|undefined} A teardown function to be called during [can-stache-define-element/lifecycle-methods.disconnect disconnect]. This function can be used to tear down anything that was set up during `connected`, using any local variables in its closure.
+  @return {Function|undefined} A teardown function to be called during [can-stache-element/lifecycle-methods.disconnect disconnect]. This function can be used to tear down anything that was set up during `connected`, using any local variables in its closure.
diff --git a/docs/connectedCallback.md b/docs/connectedCallback.md
index 942b8dd..2a0c689 100644
--- a/docs/connectedCallback.md
+++ b/docs/connectedCallback.md
@@ -1,22 +1,22 @@
-@function can-stache-define-element/lifecycle-methods.connectedCallback connectedCallback
-@parent can-stache-define-element/lifecycle-methods 0
+@function can-stache-element/lifecycle-methods.connectedCallback connectedCallback
+@parent can-stache-element/lifecycle-methods 0
 
 @description A lifecycle hook called after the element is inserted into the document.
 
 @signature `connectedCallback(props)`
 
-  The browser calls a custom element's `connectedCallback` when the element is added to the page. StacheDefineElement uses this to set up the element's properties, render its view, and call the `connected` lifecycle hook.
+  The browser calls a custom element's `connectedCallback` when the element is added to the page. StacheElement uses this to set up the element's properties, render its view, and call the `connected` lifecycle hook.
 
   The `connectedCallback` can also be called manually to trigger these things. For example, the following defines a `greeting` property, uses it in the `view`, and also programmatically adds a `<p>` element in the `connected` hook:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	static view = `
 		<p>{{this.greeting}}</p>
 	`;
-	static define = {
+	static props = {
 		greeting: { type: String, default: "Hello" }
 	};
 	connected() {
@@ -44,10 +44,10 @@
 
 ## Purpose
 
-`StacheDefineElement` implements the custom element `connectedCallback` hook to:
+`StacheElement` implements the custom element `connectedCallback` hook to:
 
-1. [can-stache-define-element/lifecycle-methods.initialize] the element with property values. These will be passed to `initialize`.
-2. [can-stache-define-element/lifecycle-methods.render] the stache view into the element.
-3. [can-stache-define-element/lifecycle-methods.connect] the element to the DOM.
+1. [can-stache-element/lifecycle-methods.initialize] the element with property values. These will be passed to `initialize`.
+2. [can-stache-element/lifecycle-methods.render] the stache view into the element.
+3. [can-stache-element/lifecycle-methods.connect] the element to the DOM.
 
-The `connectedCallback` can be _called_ to initiate these lifecycle methods. **When creating an extended `StacheDefineElement`, the `connectedCallback` should not be overwritten.** Code that needs to run when an element is added to the page should be put in [can-stache-define-element/lifecycle-hooks.connected].
+The `connectedCallback` can be _called_ to initiate these lifecycle methods. **When creating an extended `StacheElement`, the `connectedCallback` should not be overwritten.** Code that needs to run when an element is added to the page should be put in [can-stache-element/lifecycle-hooks.connected].
diff --git a/docs/disconnect.md b/docs/disconnect.md
index 7039064..ce7bd0c 100644
--- a/docs/disconnect.md
+++ b/docs/disconnect.md
@@ -1,23 +1,23 @@
-@function can-stache-define-element/lifecycle-methods.disconnect disconnect
-@parent can-stache-define-element/lifecycle-methods 5
+@function can-stache-element/lifecycle-methods.disconnect disconnect
+@parent can-stache-element/lifecycle-methods 5
 
-@description Disconnect a `StacheDefineElement` instance from the DOM.
+@description Disconnect a `StacheElement` instance from the DOM.
 
 @signature `disconnect()`
 
-  Calling `disconnect` will clean up an element's event handlers and call its [can-stache-define-element/lifecycle-hooks.disconnected disconnected hook]. Normally this is called by the [can-stache-define-element/lifecycle-methods.disconnectedCallback], but can be called manually for testing:
+  Calling `disconnect` will clean up an element's event handlers and call its [can-stache-element/lifecycle-hooks.disconnected disconnected hook]. Normally this is called by the [can-stache-element/lifecycle-methods.disconnectedCallback], but can be called manually for testing:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
   const logs = [];
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  static view = `
 		  <p>{{this.name}} has been running for {{this.time}} seconds</p>
 	  `;
 
-	  static define = {
+	  static props = {
 		  name: { type: String, default: "App" },
 		  time: { type: Number, default: 0 }
 	  };
@@ -76,7 +76,7 @@ For testing purposes or integration with other libraries, `disconnect` can be ca
 The first time `disconnect` is called, it will:
 
 - call [can-event-queue/map/map.stopListening stopListening].
-- call a teardown handler returned by the [can-stache-define-element/lifecycle-hooks.connected connected hook].
-- call the [can-stache-define-element/lifecycle-hooks.disconnected disconnected hook].
+- call a teardown handler returned by the [can-stache-element/lifecycle-hooks.connected connected hook].
+- call the [can-stache-element/lifecycle-hooks.disconnected disconnected hook].
 
 Subsequent calls to `disconnect` will not have any effect.
diff --git a/docs/disconnected.md b/docs/disconnected.md
index 8285cd1..9b6e056 100644
--- a/docs/disconnected.md
+++ b/docs/disconnected.md
@@ -1,18 +1,18 @@
-@function can-stache-define-element/lifecycle-hooks.disconnected disconnected
-@parent can-stache-define-element/lifecycle-hooks
+@function can-stache-element/lifecycle-hooks.disconnected disconnected
+@parent can-stache-element/lifecycle-hooks
 
 @description A lifecycle hook called after the element is inserted into the document.
 
 @signature `disconnected()`
 
-  The `disconnected` hook is called by the [can-stache-define-element/lifecycle-methods.disconnectedCallback] when an element is removed from the page. Code that needs to run when the element is no longer in the page should be put in `disconnected` so that you do not need to worry about the rest of the lifecycle (you do not need to use `super` when implementing `disconnected`). Code that has both setup and teardown can be simplified using [can-stache-define-element/lifecycle-hooks.connected] since the teardown function has a closure over variables created in `connected`.
+  The `disconnected` hook is called by the [can-stache-element/lifecycle-methods.disconnectedCallback] when an element is removed from the page. Code that needs to run when the element is no longer in the page should be put in `disconnected` so that you do not need to worry about the rest of the lifecycle (you do not need to use `super` when implementing `disconnected`). Code that has both setup and teardown can be simplified using [can-stache-element/lifecycle-hooks.connected] since the teardown function has a closure over variables created in `connected`.
 
    The following example uses `disconnected` to make an HTTP POST request when the element is removed from the page:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  disconnected() {
 		  fetch("/api/log", {
 			  method: "POST",
diff --git a/docs/disconnectedCallback.md b/docs/disconnectedCallback.md
index 8b2ffa7..04eaf18 100644
--- a/docs/disconnectedCallback.md
+++ b/docs/disconnectedCallback.md
@@ -1,18 +1,18 @@
-@function can-stache-define-element/lifecycle-methods.disconnectedCallback disconnectedCallback
-@parent can-stache-define-element/lifecycle-methods 4
+@function can-stache-element/lifecycle-methods.disconnectedCallback disconnectedCallback
+@parent can-stache-element/lifecycle-methods 4
 
 @description A lifecycle hook called after the element is removed from the document.
 
 @signature `disconnectedCallback()`
 
-  The browser calls a custom element's `disconnectedCallback` when the element is removed from the page. StacheDefineElement uses this to clean up event handlers and call the `disconnected` lifecycle hook.
+  The browser calls a custom element's `disconnectedCallback` when the element is removed from the page. StacheElement uses this to clean up event handlers and call the `disconnected` lifecycle hook.
 
   The `disconnectedCallback` can also be called manually to trigger these things:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  connected() {
 		  this.listenTo("greeting", (greeting) => {
 			  console.log(`greeting changed to ${greeting}`);
@@ -41,10 +41,10 @@
 
 ## Purpose
 
-`StacheDefineElement` implements the custom element `disconnectedCallback` hook to:
+`StacheElement` implements the custom element `disconnectedCallback` hook to:
 
-- [can-stache-define-element/lifecycle-methods.disconnect] the element from the DOM.
+- [can-stache-element/lifecycle-methods.disconnect] the element from the DOM.
 
-The `disconnect` method handles cleaning up any event handlers created for the element (including calling [can-event-queue/map/map.stopListening stopListening]) and then calls the [can-stache-define-element/lifecycle-hooks.disconnected disconnected hook].
+The `disconnect` method handles cleaning up any event handlers created for the element (including calling [can-event-queue/map/map.stopListening stopListening]) and then calls the [can-stache-element/lifecycle-hooks.disconnected disconnected hook].
 
-**When creating an extended `StacheDefineElement`, the `disconnectedCallback` should not be overwritten.** Code that needs to run when an element is removed from the page should be put in [can-stache-define-element/lifecycle-hooks.disconnected].
+**When creating an extended `StacheElement`, the `disconnectedCallback` should not be overwritten.** Code that needs to run when an element is removed from the page should be put in [can-stache-element/lifecycle-hooks.disconnected].
diff --git a/docs/initialize.md b/docs/initialize.md
index adcbb8e..1bc785a 100644
--- a/docs/initialize.md
+++ b/docs/initialize.md
@@ -1,20 +1,20 @@
-@typedef {function} can-stache-define-element/lifecycle-methods.initialize initialize
-@parent can-stache-define-element/lifecycle-methods 1
+@typedef {function} can-stache-element/lifecycle-methods.initialize initialize
+@parent can-stache-element/lifecycle-methods 1
 
-@description Initialize a `StacheDefineElement` instance with property values.
+@description Initialize a `StacheElement` instance with property values.
 
 @signature `initialize(props)`
 
-  Calling `initialize` will set up property definitions and set initial property values. Normally this is called by the [can-stache-define-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
+  Calling `initialize` will set up property definitions and set initial property values. Normally this is called by the [can-stache-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  static view = `
 		  <p>{{this.age}}</p>
 	  `;
-	  static define = {
+	  static props = {
 		  age: { type: Number, default: 30 }
 	  };
   }
diff --git a/docs/define.md b/docs/props.md
similarity index 53%
rename from docs/define.md
rename to docs/props.md
index 9882e6e..f827123 100644
--- a/docs/define.md
+++ b/docs/props.md
@@ -1,19 +1,19 @@
-@function can-stache-define-element/static.define define
-@parent can-stache-define-element/static 1
+@function can-stache-element/static.props props
+@parent can-stache-element/static 1
 
-@description A static property used to create [can-define-object DefineObject]-like properties on each `StacheDefineElement` instance.
+@description A static property used to create [can-observable-object ObservableObject]-like properties on each `StacheElement` instance.
 
-@signature `static define = { ... };`
+@signature `static props = { ... };`
 
-  To manage the logic and state of an element, [can-define-object DefineObject]-like property definitions can be added to explicitly configure how an element's properties are defined.
+  To manage the logic and state of an element, [can-observable-object ObservableObject]-like property definitions can be added to explicitly configure how an element's properties are defined.
 
   To add property definitions, add a `static` class field like shown below.
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class TodoItem extends StacheDefineElement {
-	  static define = {
+  class TodoItem extends StacheElement {
+	  static props = {
 		  name: String,
 		  completed: false
 	  };
@@ -29,15 +29,15 @@
   ```
   @codepen
 
-  > Note: to see all the options supported by `define`, see [can-define-object].
+  > Note: to see all the options supported by `define`, see [can-observable-object].
 
-@signature `static get define() { return { ... }; }`
+@signature `static get props() { return { ... }; }`
 
   For browsers that do not support class fields (and applications not using a transpiler), properties can be defined using a `static` getter like shown below.
 
   ```js
-  class TodoItem extends StacheDefineElement {
-	  static define = {
+  class TodoItem extends StacheElement {
+	  static props = {
 		name: String,
 		completed: false
 	};
@@ -45,13 +45,13 @@
   customElements.define("todo-item", TodoItem);
   ```
 
-  > Note: to see all the options supported by `define`, see [can-define-object].
+  > Note: to see all the options supported by `define`, see [can-observable-object].
 
 @body
 
 ## Use
 
-Defining a property using a [can-define-object/object.types.property shorthand] or [can-define-object/object.types.definitionObject definition object] is a great way to encapsulate the logic and state of an element's properties.
+Defining a property using a [can-observable-object/object.types.property shorthand] or [can-observable-object/object.types.definitionObject definition object] is a great way to encapsulate the logic and state of an element's properties.
 
 Among other things, this can be used to create
 
@@ -59,25 +59,25 @@ Among other things, this can be used to create
   - declarative, derived properties
   - required properties
 
-These are discussed below and the full set of options can be found in the [can-define-object DefineObject documentation].
+These are discussed below and the full set of options can be found in the [can-observable-object ObservableObject documentation].
 
 ### Typed properties
 
-[can-define-object#Typedproperties Typed properties] can be used to ensure that the value of an element's property is the expected type. Types are strict by default, but type conversion is also available for properties that do not need to be stricty typed through methods like [can-type/maybe type.maybe], [can-type/convert type.convert], and others.
+[can-observable-object#Typedproperties Typed properties] can be used to ensure that the value of an element's property is the expected type. Types are strict by default, but type conversion is also available for properties that do not need to be stricty typed through methods like [can-type/maybe type.maybe], [can-type/convert type.convert], and others.
 
 The following example...
 
 ```js
-import { StacheDefineElement, type } from "can/everything";
+import { StacheElement, type } from "can/everything";
 
-class Person extends StacheDefineElement {
+class Person extends StacheElement {
 	static view = `
 		<p>{{first}}</p>
 		<p>{{last}}</p>
 		<p>{{age}}</p>
 		<p>{{birthday}}</p>
 	`;
-	static define = {
+	static props = {
 		first: String,
 		last: type.maybe(String),
 		age: type.convert(Number),
@@ -100,23 +100,23 @@ document.body.appendChild(fib);
 
 ### Declarative properties
 
-[can-define-object#Declarativeproperties Declarative properties] can be used to create properties that functionally derive their value from other property values. There are many options for creating declarative properties, including [can-define-object/define/get getters], [can-define-object/define/async asynchronous properties], and even techniques similar to [can-define-object/define/value event streams and functional reactive programming].
+[can-observable-object#Declarativeproperties Declarative properties] can be used to create properties that functionally derive their value from other property values. There are many options for creating declarative properties, including [can-observable-object/define/get getters], [can-observable-object/define/async asynchronous properties], and even techniques similar to [can-observable-object/define/value event streams and functional reactive programming].
 
 The following example shows a few examples of declarative properties:
 
 ```html
 <per-son></per-son>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 
-class Person extends StacheDefineElement {
+class Person extends StacheElement {
 	static view = `
 		<p>First: <input value:bind="first"></p>
 		<p>Last: <input value:bind="last"></p>
 		<p>Full Name: {{fullName}}</p>
 		<p>Name Changes: {{nameChangeCount}}</p>
 	`;
-	static define = {
+	static props = {
 		first: "Kevin",
 		last: "McCallister",
 		get fullName() {
@@ -140,17 +140,17 @@ customElements.define("per-son", Person);
 
 ### Required properties
 
-[can-define-object/define/required Required properties] ensure that if an element is instantiated without a value for that property, an error will be thrown.
+[can-observable-object/define/required Required properties] ensure that if an element is instantiated without a value for that property, an error will be thrown.
 
 In the following example, an error is thrown because the `<to-do>` element is instantiated without a `name` property. To prevent this, the element should be created with a value for `name` like [can-stache-bindings <to-do name:raw="Go Shopping" />].
 
 ```html
 <to-do></to-do>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 
-class Todo extends StacheDefineElement {
-	static define = {
+class Todo extends StacheElement {
+	static props = {
 		name: { type: String, required: true }
 	};
 }
@@ -160,4 +160,4 @@ customElements.define("to-do", Todo);
 @codepen
 @highlight 7
 
-For all of the options available for defining properties, see the [can-define-object DefineObject documentation].
+For all of the options available for defining properties, see the [can-observable-object ObservableObject documentation].
diff --git a/docs/render.md b/docs/render.md
index 12af5d2..121aca6 100644
--- a/docs/render.md
+++ b/docs/render.md
@@ -1,20 +1,20 @@
-@function can-stache-define-element/lifecycle-methods.render render
-@parent can-stache-define-element/lifecycle-methods 2
+@function can-stache-element/lifecycle-methods.render render
+@parent can-stache-element/lifecycle-methods 2
 
-@description Render a `StacheDefineElement` instance.
+@description Render a `StacheElement` instance.
 
 @signature `render(props)`
 
-  Calling `render` will [can-stache-define-element/lifecycle-methods.initialize] an element and render its [can-stache-define-element/static.view] into its `innerHTML`. Normally this is called by the [can-stache-define-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
+  Calling `render` will [can-stache-element/lifecycle-methods.initialize] an element and render its [can-stache-element/static.view] into its `innerHTML`. Normally this is called by the [can-stache-element/lifecycle-methods.connectedCallback], but can be called manually for testing:
 
   ```js
-  import { StacheDefineElement } from "can/everything";
+  import { StacheElement } from "can/everything";
 
-  class MyElement extends StacheDefineElement {
+  class MyElement extends StacheElement {
 	  static view = `
 		  <p>{{this.age}}</p>
 	  `;
-	  static define = {
+	  static props = {
 		  age: { type: Number, default: 30 }
 	  };
   }
@@ -40,7 +40,7 @@ For testing purposes or integration with other libraries, `render` can be called
 
 The first time `render` is called, it will:
 
-- [can-stache-define-element/lifecycle-methods.initialize] the element with the property values passed to `render`.
+- [can-stache-element/lifecycle-methods.initialize] the element with the property values passed to `render`.
 - render the stache view into the element.
 
 Subsequent calls to `render` will not have any effect.
diff --git a/docs/view.md b/docs/view.md
index 02cda13..8815887 100644
--- a/docs/view.md
+++ b/docs/view.md
@@ -1,5 +1,5 @@
-@property {String|can-stache.view}  can-stache-define-element/static.view view
-@parent can-stache-define-element/static 0
+@property {String|can-stache.view}  can-stache-element/static.view view
+@parent can-stache-element/static 0
 
 @description Provides a way to render the element's innerHTML using a [can-stache] template.
 
@@ -10,8 +10,8 @@
   ```html
   <count-er></count-er>
   <script type="module">
-  import { StacheDefineElement } from "can/everything";
-  class Counter extends StacheDefineElement {
+  import { StacheElement } from "can/everything";
+  class Counter extends StacheElement {
   	static view = `
   		<p>Count: <span>1</span></p>
   	`;
@@ -28,8 +28,8 @@
   For browsers that do not support class fields (and applications not using a transpiler), properties can be defined using a `static` getter like shown below.
 
   ```js
-  import { StacheDefineElement } from "can/everything";
-  class Counter extends StacheDefineElement {
+  import { StacheElement } from "can/everything";
+  class Counter extends StacheElement {
   	static get view() {
   		return `
 			<p>Count: <span>1</span></p>
@@ -43,11 +43,11 @@
   A function can be passed as the view property. This is useful for loading views in their own files and loading them with [steal-stache] or similar.
 
   ```js
-  import { StacheDefineElement, stache } from "can/everything";
+  import { StacheElement, stache } from "can/everything";
 
   const renderer = stache(`<p>Count: <span>1</span></p>`);
 
-  class Counter extends StacheDefineElement {
+  class Counter extends StacheElement {
 	  static view = renderer;
   }
   ```
@@ -56,7 +56,7 @@
 
 ## Background
 
-StacheDefineElement uses [can-stache] views. Please read [can-stache stache's documentation] to understand how to do things like:
+StacheElement uses [can-stache] views. Please read [can-stache stache's documentation] to understand how to do things like:
 
 - Write values to the page
 - Branching logic
@@ -72,16 +72,16 @@ There are three things to understand about an element's view:
 
   - __Rendered with the element__ - The view is rendered with `this` as the element instance.
   - __Rendered into the element's innerHTML__ - The rendered result of the view is inserted into the element.
-  - __Rendered at the right time__ - The view is rendered when the element is [can-stache-define-element/lifecycle-methods.connectedCallback inserted into the page] or when [can-stache-define-element/lifecycle-methods.render] is called for testing.
+  - __Rendered at the right time__ - The view is rendered when the element is [can-stache-element/lifecycle-methods.connectedCallback inserted into the page] or when [can-stache-element/lifecycle-methods.render] is called for testing.
 
 ## Rendered with the element
 
 The view is rendered with `this` as the element instance. The following prints the `age` property of the element.
 
 ```js
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 
-class Person extends StacheDefineElement {
+class Person extends StacheElement {
 	static view = `
 		<p>You are {{this.age}}</p>
 	`;
@@ -101,7 +101,7 @@ The view specified by `view` is rendered directly within the custom element.
 For example the following element:
 
 ```js
-class Greeting extends StacheDefineElement {
+class Greeting extends StacheElement {
 	static view = `
 		<h1>Hello There</h1>
 	`;
@@ -143,13 +143,13 @@ If there is existing content within the source html, like:
 
 ## Rendered at the right time
 
-StacheDefineElement handles rendering the view at the right time. In normal application use, this is done during the [can-stache-define-element/lifecycle-methods.connectedCallback connectedCallback], which is called by the browser when the element is inserted into the page as part of the normal lifecycle of custom elements.
+StacheElement handles rendering the view at the right time. In normal application use, this is done during the [can-stache-element/lifecycle-methods.connectedCallback connectedCallback], which is called by the browser when the element is inserted into the page as part of the normal lifecycle of custom elements.
 
 ```html
 <count-er></count-er>
 <script type="module">
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		<p>Count: <span>1</span></p>
 	`;
@@ -166,11 +166,11 @@ customElements.define("count-er", Counter);
 ```
 @codepen
 
-For testing purposes, the [can-stache-define-element/lifecycle-methods.render] method can be called to manually render the view. This means that the view can be tested without putting the element in the page, which greatly improves the performance of tests.
+For testing purposes, the [can-stache-element/lifecycle-methods.render] method can be called to manually render the view. This means that the view can be tested without putting the element in the page, which greatly improves the performance of tests.
 
 ```js
-import { StacheDefineElement } from "can/everything";
-class Counter extends StacheDefineElement {
+import { StacheElement } from "can/everything";
+class Counter extends StacheElement {
 	static view = `
 		<p>Count: <span>1</span></p>
 	`;
@@ -197,12 +197,12 @@ The [guides/setup] guide has details on how to import stache views directly. For
 the following example uses `import view from "./app.stache";`:
 
 ```js
-import { StacheDefineElement } from "can/everything";
+import { StacheElement } from "can/everything";
 import view from "./app.stache";
 
-class MyApp extends StacheDefineElement {
+class MyApp extends StacheElement {
 	static view = view;
-	static define = {
+	static props = {
       message: "Hello World"
 	};
 }
diff --git a/package.json b/package.json
index c48e4ff..92b08fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "can-stache-define-element",
-  "description": "Create custom elements with can-stache, can-define-class, and JavaScript classes",
+  "name": "can-stache-element",
+  "description": "Create custom elements with can-stache, can-observable-object, and JavaScript classes",
   "version": "0.7.5",
   "author": {
     "name": "Bitovi",
@@ -9,14 +9,14 @@
   },
   "browserslist": "ie 11",
   "bugs": {
-    "url": "https://github.com/canjs/can-stache-define-element/issues"
+    "url": "https://github.com/canjs/can-stache-element/issues"
   },
   "dependencies": {
     "can-bind": "^1.4.3",
     "can-child-nodes": "^1.2.1",
     "can-define-lazy-value": "^1.1.0",
-    "can-define-mixin": "<2.0.0",
     "can-log": "^1.0.2",
+    "can-observable-mixin": "<2.0.0",
     "can-simple-observable": "^2.4.2",
     "can-stache": "^4.0.0",
     "can-stache-bindings": "^4.0.0",
@@ -42,15 +42,15 @@
     "test-saucelabs": "0.0.6",
     "testee": "^0.9.0"
   },
-  "homepage": "https://github.com/canjs/can-stache-define-element",
+  "homepage": "https://github.com/canjs/can-stache-element",
   "keywords": [
     "CanJS"
   ],
   "license": "MIT",
-  "main": "dist/can-stache-define-element.js",
+  "main": "dist/can-stache-element.js",
   "repository": {
     "type": "git",
-    "url": "git://github.com/canjs/can-stache-define-element.git"
+    "url": "git://github.com/canjs/can-stache-element.git"
   },
   "scripts": {
     "ci": "npm run test && node test/test-saucelabs.js && npm run compile-to-es5",
@@ -65,6 +65,6 @@
     "testee": "testee test/test.html --browsers firefox"
   },
   "steal": {
-    "main": "src/can-stache-define-element.js"
+    "main": "src/can-stache-element.js"
   }
 }
diff --git a/readme.md b/readme.md
index e49603f..20e3e97 100644
--- a/readme.md
+++ b/readme.md
@@ -1,26 +1,26 @@
-# can-stache-define-element
+# can-stache-element
 
 [![Join our Slack](https://img.shields.io/badge/slack-join%20chat-611f69.svg)](https://www.bitovi.com/community/slack?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Join our Discourse](https://img.shields.io/discourse/https/forums.bitovi.com/posts.svg)](https://forums.bitovi.com/?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/canjs/can-stache-define-element/blob/master/LICENSE.md)
-[![npm version](https://badge.fury.io/js/can-stache-define-element.svg)](https://www.npmjs.com/package/can-stache-define-element)
-[![Travis build status](https://travis-ci.com/canjs/can-stache-define-element.svg?branch=master)](https://travis-ci.com/canjs/can-stache-define-element)
-[![Greenkeeper badge](https://badges.greenkeeper.io/canjs/can-stache-define-element.svg)](https://greenkeeper.io/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/canjs/can-stache-element/blob/master/LICENSE.md)
+[![npm version](https://badge.fury.io/js/can-stache-element.svg)](https://www.npmjs.com/package/can-stache-element)
+[![Travis build status](https://travis-ci.com/canjs/can-stache-element.svg?branch=master)](https://travis-ci.com/canjs/can-stache-element)
+[![Greenkeeper badge](https://badges.greenkeeper.io/canjs/can-stache-element.svg)](https://greenkeeper.io/)
 
-Import/require **can-stache-define-element** and use the Element to derive your own classes. Calling `customElements.define` will register your element with the window's registry of custom elements.
+Import/require **can-stache-element** and use the Element to derive your own classes. Calling `customElements.define` will register your element with the window's registry of custom elements.
 
 ## Documentation
 
-Read the [can-stache-define-element API docs on CanJS.com](https://canjs.com/doc/can-stache-define-element.html).
+Read the [can-stache-element API docs on CanJS.com](https://canjs.com/doc/can-stache-element.html).
 
 ## Changelog
 
-See the [latest releases on GitHub](https://github.com/canjs/can-stache-define-element/releases).
+See the [latest releases on GitHub](https://github.com/canjs/can-stache-element/releases).
 
 ## Contributing
 
-The [contribution guide](https://github.com/canjs/can-stache-define-element/blob/master/CONTRIBUTING.md) has information on getting help, reporting bugs, developing locally, and more.
+The [contribution guide](https://github.com/canjs/can-stache-element/blob/master/CONTRIBUTING.md) has information on getting help, reporting bugs, developing locally, and more.
 
 ## License
 
-[MIT](https://github.com/canjs/can-stache-define-element/blob/master/LICENSE.md)
+[MIT](https://github.com/canjs/can-stache-element/blob/master/LICENSE.md)
diff --git a/src/can-stache-define-element-test.js b/src/can-stache-element-test.js
similarity index 90%
rename from src/can-stache-define-element-test.js
rename to src/can-stache-element-test.js
index f2ce662..2d5096d 100644
--- a/src/can-stache-define-element-test.js
+++ b/src/can-stache-element-test.js
@@ -3,18 +3,18 @@ const Scope = require("can-view-scope");
 const viewCallbacks = require("can-view-callbacks");
 const stache = require("can-stache");
 const SimpleObservable = require("can-simple-observable");
-const StacheDefineElement = require("./can-stache-define-element");
+const StacheElement = require("./can-stache-element");
 const browserSupports = require("../test/browser-supports");
 const canReflect = require("can-reflect");
 const dev = require("can-test-helpers").dev;
 
-QUnit.module("can-stache-define-element");
+QUnit.module("can-stache-element");
 
 if (browserSupports.customElements) {
 	QUnit.test("basics", function(assert) {
 		const fixture = document.querySelector("#qunit-fixture");
 
-		class Input extends StacheDefineElement {
+		class Input extends StacheElement {
 			static get view() {
 				return `<p><input value:bind="this.inputValue" on:change="this.handleChange(scope.element.value)"></p>`;
 			}
@@ -26,7 +26,7 @@ if (browserSupports.customElements) {
 		}
 		customElements.define("in-put", Input);
 
-		class Basic extends StacheDefineElement {
+		class Basic extends StacheElement {
 			static get view() {
 				return `
 					<in-put inputValue:bind="this.first" handler:from="this.setFirst"></in-put>
@@ -35,7 +35,7 @@ if (browserSupports.customElements) {
 				`;
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					first: { type: String, default: "Kevin" },
 					last: { type: String, default: "McCallister" }
@@ -77,7 +77,7 @@ if (browserSupports.customElements) {
 	});
 
 	QUnit.test("can be rendered by canViewCallbacks.tagHandler", function(assert) {
-		class App extends StacheDefineElement {
+		class App extends StacheElement {
 			static get view() {
 				return "Hello {{greeting}}";
 			}
@@ -96,8 +96,8 @@ if (browserSupports.customElements) {
 	});
 
 	QUnit.test("Can initialize with el.initialize()", function(assert) {
-		class El extends StacheDefineElement {
-			static get define() {
+		class El extends StacheElement {
+			static get props() {
 				return {
 					prop: "default"
 				};
@@ -112,7 +112,7 @@ if (browserSupports.customElements) {
 	QUnit.test("programatically instantiated elements get disconnected when removed", function(assert) {
 		let done = assert.async();
 
-		class Person extends StacheDefineElement {
+		class Person extends StacheElement {
 			static get view() {
 				return `
 					<p>person</p>
@@ -125,7 +125,7 @@ if (browserSupports.customElements) {
 		}
 		customElements.define("per-son", Person);
 
-		class App extends StacheDefineElement {
+		class App extends StacheElement {
 			static get view() {
 				return `
 					<p>
@@ -135,7 +135,7 @@ if (browserSupports.customElements) {
 					</p>
 				`;
 			}
-			static get define() {
+			static get props() {
 				return {
 					showPerson: true,
 					person: {
@@ -170,7 +170,7 @@ if (browserSupports.customElements) {
 
 		const show = new SimpleObservable(false);
 
-		class El extends StacheDefineElement {
+		class El extends StacheElement {
 			connected() {
 				assert.ok(true, "connected");
 			}
@@ -207,7 +207,7 @@ if (browserSupports.customElements) {
 	QUnit.test("addEventListener and removeEventListener work for DOM events", function(assert) {
 		const done = assert.async();
 
-		class El extends StacheDefineElement {}
+		class El extends StacheElement {}
 		customElements.define("add-event-listener-el", El);
 
 		const el = new El();
@@ -224,12 +224,12 @@ if (browserSupports.customElements) {
 	});
 
 	QUnit.test("value() updates", function(assert) {
-		class Foo extends StacheDefineElement {
+		class Foo extends StacheElement {
 			static get view() {
 				return '<span>{{second}}</span>';
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					first: "one",
 					second: {
@@ -274,8 +274,8 @@ if (browserSupports.customElements) {
 	});
 
 	dev.devOnlyTest("Warns when a property matches an event name", function(assert) {
-		class ClickPropEl extends StacheDefineElement {
-			static get define() {
+		class ClickPropEl extends StacheElement {
+			static get props() {
 				return {
 					click: String,
 					get other() {
diff --git a/src/can-stache-define-element.js b/src/can-stache-element.js
similarity index 71%
rename from src/can-stache-define-element.js
rename to src/can-stache-element.js
index df07086..2784e1c 100644
--- a/src/can-stache-define-element.js
+++ b/src/can-stache-element.js
@@ -1,7 +1,7 @@
 "use strict";
 
 const mixinLifecycleMethods = require("./mixin-lifecycle-methods");
-const mixinDefine = require("./mixin-define");
+const mixinProps = require("./mixin-props");
 const mixinStacheView = require("./mixin-stache-view");
 const mixinViewModelSymbol = require("./mixin-viewmodel-symbol");
 const mixinBindings = require("./mixin-bindings");
@@ -12,7 +12,7 @@ const initializeSymbol = Symbol.for("can.initialize");
 const teardownHandlersSymbol = Symbol.for("can.teardownHandlers");
 
 function DeriveElement(BaseElement = HTMLElement) {
-	class StacheDefineElement extends
+	class StacheElement extends
 	// add lifecycle methods
 	// this needs to happen after other mixins that implement these methods
 	// so that this.<lifecycleMethod> is the actual lifecycle method which
@@ -24,8 +24,8 @@ function DeriveElement(BaseElement = HTMLElement) {
 			mixinViewModelSymbol(
 				// mix in stache renderer from `static view` property
 				mixinStacheView(
-					// add getters/setters from `static define` property
-					mixinDefine(BaseElement)
+					// add getters/setters from `static props` property
+					mixinProps(BaseElement)
 				)
 			)
 		)
@@ -48,15 +48,15 @@ function DeriveElement(BaseElement = HTMLElement) {
 		}
 	}
 
-	function StacheDefineElementConstructorFunction() {
-		const self = Reflect.construct(StacheDefineElement, arguments, this.constructor);
+	function StacheElementConstructorFunction() {
+		const self = Reflect.construct(StacheElement, arguments, this.constructor);
 		return self;
 	}
 
-	StacheDefineElementConstructorFunction.prototype = Object.create(StacheDefineElement.prototype);
-	StacheDefineElementConstructorFunction.prototype.constructor = StacheDefineElementConstructorFunction;
+	StacheElementConstructorFunction.prototype = Object.create(StacheElement.prototype);
+	StacheElementConstructorFunction.prototype.constructor = StacheElementConstructorFunction;
 
-	return StacheDefineElementConstructorFunction;
+	return StacheElementConstructorFunction;
 }
 
 module.exports = DeriveElement();
diff --git a/src/import-export-steal-test.js b/src/import-export-steal-test.js
index 38ed34c..0e660d4 100644
--- a/src/import-export-steal-test.js
+++ b/src/import-export-steal-test.js
@@ -1,13 +1,13 @@
 import QUnit from "steal-qunit";
-import StacheDefineElement from "./can-stache-define-element";
+import StacheElement from "./can-stache-element";
 import browserSupports from "../test/browser-supports";
 
-QUnit.module("can-stache-define-element - import/export syntax in steal");
+QUnit.module("can-stache-element - import/export syntax in steal");
 
 if (browserSupports.customElements) {
 	QUnit.test("Works when import/export syntax is transpiled by steal to ES5 constructor functions", function(assert) {
 		const tag = "import-export-steal";
-		class MyElement extends StacheDefineElement {
+		class MyElement extends StacheElement {
 			static get view() {
 				return "Hello world";
 			}
diff --git a/src/mixin-bindings-test.js b/src/mixin-bindings-test.js
index bce9b88..dff7908 100644
--- a/src/mixin-bindings-test.js
+++ b/src/mixin-bindings-test.js
@@ -1,12 +1,12 @@
 const QUnit = require("steal-qunit");
-const StacheDefineElement = require("./can-stache-define-element");
+const StacheElement = require("./can-stache-element");
 const value = require("can-value");
 
 const browserSupports = require("../test/browser-supports");
 const canReflect = require("can-reflect");
 
 let fixture;
-QUnit.module("can-stache-define-element - mixin-bindings", {
+QUnit.module("can-stache-element - mixin-bindings", {
 	beforeEach() {
 		fixture = document.querySelector("#qunit-fixture");
 	}
@@ -14,12 +14,12 @@ QUnit.module("can-stache-define-element - mixin-bindings", {
 
 if (browserSupports.customElements) {
 	QUnit.test("basics work", function(assert) {
-		class BasicBindingsElement extends StacheDefineElement {
+		class BasicBindingsElement extends StacheElement {
 			static get view() {
 				return `<h1>{{message}}</h1>`;
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					message: { type: String, default: "Hi" }
 				};
@@ -82,7 +82,7 @@ if (browserSupports.customElements) {
 		let done = assert.async();
 		let oneId = 0, twoId = 0;
 
-		class One extends StacheDefineElement {
+		class One extends StacheElement {
 			static get view() {
 				return `
 					{{this.setId(id)}}
@@ -90,7 +90,7 @@ if (browserSupports.customElements) {
 				`;
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					id: Number
 				};
@@ -102,7 +102,7 @@ if (browserSupports.customElements) {
 		}
 		customElements.define("o-ne", One);
 
-		class Two extends StacheDefineElement {
+		class Two extends StacheElement {
 			static get view() {
 				return `
 					{{this.setId(id)}}
@@ -110,7 +110,7 @@ if (browserSupports.customElements) {
 				`;
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					id: Number
 				};
@@ -122,7 +122,7 @@ if (browserSupports.customElements) {
 		}
 		customElements.define("t-wo", Two);
 
-		class App extends StacheDefineElement {
+		class App extends StacheElement {
 			static get view() {
 				return `
 					<p>
@@ -135,7 +135,7 @@ if (browserSupports.customElements) {
 				`;
 			}
 
-			static get define() {
+			static get props() {
 				return {
 					id: 1,
 
@@ -187,11 +187,11 @@ if (browserSupports.customElements) {
 	});
 
 	QUnit.test("All bindings are torn down", function(assert) {
-		class BindingsTeardownElement extends StacheDefineElement {
+		class BindingsTeardownElement extends StacheElement {
 			static get view() {
 				return `<h1>{{greeting}} {{object}}</h1>`;
 			}
-			static get define() {
+			static get props() {
 				return {
 					greeting: { type: String, default: "Hi" },
 					object: { type: String, default: "person" }
@@ -227,7 +227,7 @@ if (browserSupports.customElements) {
 	});
 
 	QUnit.test("Lifecycle methods return the element", function(assert) {
-		class BindingsMethodsElement extends StacheDefineElement {}
+		class BindingsMethodsElement extends StacheElement {}
 		customElements.define("bindings-methods-element", BindingsMethodsElement);
 
 		let obj = new BindingsMethodsElement()
diff --git a/src/mixin-lifecycle-methods-test.js b/src/mixin-lifecycle-methods-test.js
index 9bddcef..6ee4196 100644
--- a/src/mixin-lifecycle-methods-test.js
+++ b/src/mixin-lifecycle-methods-test.js
@@ -4,7 +4,7 @@ const browserSupports = require("../test/browser-supports");
 
 const inSetupSymbol = Symbol.for("can.initializing");
 
-QUnit.module("can-stache-define-element - mixin-lifecycle-methods");
+QUnit.module("can-stache-element - mixin-lifecycle-methods");
 
 QUnit.test("connectedCallback calls hooks - initialize, render, connect", function(assert) {
 	assert.expect(3);
diff --git a/src/mixin-lifecycle-methods.js b/src/mixin-lifecycle-methods.js
index c96ca48..ebb378b 100644
--- a/src/mixin-lifecycle-methods.js
+++ b/src/mixin-lifecycle-methods.js
@@ -18,7 +18,7 @@ module.exports = function mixinLifecycleMethods(BaseElement = HTMLElement) {
 		constructor() {
 			super();
 			if (arguments.length) {
-				throw new Error("can-stache-define-element: Do not pass arguments to the constructor. Initial property values should be passed to the `initialize` hook.");
+				throw new Error("can-stache-element: Do not pass arguments to the constructor. Initial property values should be passed to the `initialize` hook.");
 			}
 
 			// add inSetup symbol to prevent events being dispatched
diff --git a/src/mixin-define-test.js b/src/mixin-props-test.js
similarity index 75%
rename from src/mixin-define-test.js
rename to src/mixin-props-test.js
index bde0b07..51e918f 100644
--- a/src/mixin-define-test.js
+++ b/src/mixin-props-test.js
@@ -1,12 +1,12 @@
 const QUnit = require("steal-qunit");
-const mixinDefine = require("./mixin-define");
+const mixinDefine = require("./mixin-props");
 const type = require("can-type");
 
-QUnit.module("can-stache-define-element - mixin-define");
+QUnit.module("can-stache-element - mixin-props");
 
 QUnit.test("basics", function(assert) {
 	class DefineElement extends mixinDefine(Object) {
-		static get define() {
+		static get props() {
 			return {
 				age: { type: type.convert(Number), default: 32 }
 			};
diff --git a/src/mixin-define.js b/src/mixin-props.js
similarity index 82%
rename from src/mixin-define.js
rename to src/mixin-props.js
index 17dbc5c..e2a8f46 100644
--- a/src/mixin-define.js
+++ b/src/mixin-props.js
@@ -1,4 +1,4 @@
-const { mixinElement } = require("can-define-mixin");
+const { mixinElement } = require("can-observable-mixin");
 const canReflect = require("can-reflect");
 const canLogDev = require("can-log/dev/dev");
 const eventTargetInstalledSymbol = Symbol.for("can.eventTargetInstalled");
@@ -26,8 +26,13 @@ module.exports = function mixinDefine(Base = HTMLElement) {
 		// Warn on special properties
 		//!steal-remove-start
 		if(process.env.NODE_ENV !== 'production') {
-			let defines = typeof Type.define === "object" ? Type.define : {};
-			Object.keys(defines).forEach(function(key) {
+			// look for `static props`and fall back to `static define` if `props` doesn't exist
+			let props = typeof Type.props === "object" ?
+				Type.props :
+				typeof Type.define === "object" ?
+					Type.define :
+					{};
+			Object.keys(props).forEach(function(key) {
 				if("on" + key in Type.prototype) {
 					canLogDev.warn(`${canReflect.getName(Type)}: The defined property [${key}] matches the name of a DOM event. This property could update unexpectedly. Consider renaming.`);
 				}
diff --git a/src/mixin-stache-view-test.js b/src/mixin-stache-view-test.js
index 1808cff..c9a2868 100644
--- a/src/mixin-stache-view-test.js
+++ b/src/mixin-stache-view-test.js
@@ -4,7 +4,7 @@ const mixinStacheView = require("./mixin-stache-view");
 const browserSupports = require("../test/browser-supports");
 const nodeLists = require("can-view-nodelist");
 
-QUnit.module("can-stache-define-element - mixin-stache-view");
+QUnit.module("can-stache-element - mixin-stache-view");
 
 if (browserSupports.customElements) {
 	QUnit.test("basics", function(assert) {
diff --git a/src/mixin-viewmodel-symbol-test.js b/src/mixin-viewmodel-symbol-test.js
index a5d1155..9a74ca2 100644
--- a/src/mixin-viewmodel-symbol-test.js
+++ b/src/mixin-viewmodel-symbol-test.js
@@ -2,7 +2,7 @@ const QUnit = require("steal-qunit");
 const mixinViewModelSymbol = require("./mixin-viewmodel-symbol");
 const viewModelSymbol = Symbol.for("can.viewModel");
 
-QUnit.module("can-stache-define-element - mixin-viewmodel-symbol");
+QUnit.module("can-stache-element - mixin-viewmodel-symbol");
 
 QUnit.test("basics", function(assert) {
 	class App extends mixinViewModelSymbol(class A {}) {}
diff --git a/test/test-saucelabs.js b/test/test-saucelabs.js
index cce5d00..7514d6c 100644
--- a/test/test-saucelabs.js
+++ b/test/test-saucelabs.js
@@ -28,6 +28,6 @@ var platforms = [{
 var url = "http://localhost:3000/test/test.html?hidepassed";
 
 SauceLabs({
-	urls: [{ name: "can-stache-define-element", url : url }],
+	urls: [{ name: "can-stache-element", url : url }],
 	platforms: platforms
 });
diff --git a/test/test.html b/test/test.html
index 53ef06b..8e699b7 100644
--- a/test/test.html
+++ b/test/test.html
@@ -1,4 +1,4 @@
 <!doctype html>
-<title>can-stache-define-element Tests</title>
+<title>can-stache-element Tests</title>
 <script src="../node_modules/steal/steal.js" main="test/test"></script>
 <div id="qunit-fixture"></div>
diff --git a/test/test.js b/test/test.js
index efb4764..e7d0941 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,5 +1,5 @@
-import "../src/can-stache-define-element-test";
-import "../src/mixin-define-test";
+import "../src/can-stache-element-test";
+import "../src/mixin-props-test";
 import "../src/mixin-lifecycle-methods-test";
 import "../src/mixin-stache-view-test";
 import "../src/mixin-viewmodel-symbol-test";