diff --git a/libraries/surplus/src/basic-tests.js b/libraries/surplus/src/basic-tests.js
index df00059752..da86ddb8a3 100644
--- a/libraries/surplus/src/basic-tests.js
+++ b/libraries/surplus/src/basic-tests.js
@@ -24,6 +24,7 @@ import {
   ComponentWithChildrenRerender,
   ComponentWithDifferentViews,
   ComponentWithProperties,
+  ComponentWithoutProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent
@@ -122,6 +123,18 @@ describe("basic support", function() {
       });
     });
 
+    it("will not overwrite unwriteable properties", function () {
+      this.weight = 3;
+      S.root(() => {
+        let root = <ComponentWithoutProperties />;
+        let wc = root.wc;
+        expect(wc.getAttribute('amethod')).to.eql('method');
+        expect(wc.getAttribute('agetter')).to.eql('getter');
+        expect(wc.getAttribute('areadonly')).to.eql('readonly');
+        expect(wc.innerHTML).to.eql('Success');
+      })
+    });
+
     // TODO: Is it the framework's responsibility to check if the underlying
     // property is defined? Or should it just always assume it is and do its
     // usual default behavior? Preact will actually check if it's defined and
diff --git a/libraries/surplus/src/components.js b/libraries/surplus/src/components.js
index c20d5fe4a5..050bab9039 100644
--- a/libraries/surplus/src/components.js
+++ b/libraries/surplus/src/components.js
@@ -21,6 +21,7 @@ import on from 'surplus-mixin-on';
 import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
+import 'ce-without-properties';
 import 'ce-with-event';
 
 export const ComponentWithoutChildren = () =>
@@ -80,6 +81,23 @@ export const ComponentWithProperties = () => {
     );
 }
 
+export const ComponentWithoutProperties = () => {
+  const data = {
+    getter: 'getter',
+    method: 'method',
+    readonly: 'readonly',
+  };
+  return (
+    <div>
+      <ce-without-properties ref={__.wc}
+         amethod={data.method}
+         agetter={data.getter}
+         areadonly={data.readonly}
+      ></ce-without-properties>
+    </div>
+  )
+}
+
 export const ComponentWithUnregistered = () => {
     const data = {
       bool: true,