Add custom element with method

libraries/__shared__/webcomponents/src/ce-with-methods.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+class CEWithMethods extends HTMLElement {
+
+    test() {
+        this.innerText = 'Success';
+    }
+
+    connectedCallback() {
+        this.test();
+    }
+
+}
+
+customElements.define('ce-with-methods', CEWithMethods);

libraries/angular/src/basic-tests.js

@@ -27,7 +27,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithMethods
 } from "./components";
 
 beforeEach(function() {
@@ -40,7 +41,8 @@ beforeEach(function() {
       ComponentWithProperties,
       ComponentWithUnregistered,
       ComponentWithImperativeEvent,
-      ComponentWithDeclarativeEvent
+      ComponentWithDeclarativeEvent,
+      ComponentWithMethods
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
   });
@@ -146,6 +148,13 @@ describe("basic support", function() {
       let data = wc.str || wc.getAttribute("str");
       expect(data).to.eql("Angular");
     });
+
+    it('will not overwrite methods', function () {
+      let fixture = TestBed.createComponent(ComponentWithMethods);
+      fixture.detectChanges();
+      let root = fixture.debugElement.nativeElement;
+      expect(root.innerText).to.eql('Success')
+    });
   });
 
   describe("events", function() {

libraries/angular/src/components.ts

@@ -27,6 +27,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 @Component({
   template: `
@@ -105,6 +106,15 @@ export class ComponentWithProperties {
   }
 }
 
+@Component({
+  template: `
+    <div>
+      <ce-with-methods [test]="true"></ce-with-methods>
+    </div>
+  `
+})
+export class ComponentWithMethods {}
+
 @Component({
   template: `
     <div>

libraries/react/src/basic-tests.js

@@ -29,6 +29,7 @@ import {
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
   ComponentWithDeclarativeEvent,
+  ComponentWithMethods,
 } from "./components";
 
 // Setup the test harness. This will get cleaned out with every test.
@@ -198,6 +199,19 @@ describe("basic support", function () {
       expect(data).to.eql("React");
     });
 
+    it('will not overwrite methods', function () {
+      let root;
+      render(
+        <ComponentWithMethods
+          ref={(current) => {
+            root = current;
+          }}
+        />
+      )
+      let wc = root.wc;
+      expect(wc.innerText).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

libraries/react/src/components.js

@@ -20,6 +20,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 export class ComponentWithoutChildren extends Component {
   render() {
@@ -110,6 +111,14 @@ export class ComponentWithProperties extends Component {
   }
 }
 
+export class ComponentWithMethods extends Component {
+  render() {
+    return <div>
+      <ce-with-methods test ref={(el) => this.wc = el}></ce-with-methods>
+    </div>
+  }
+}
+
 export class ComponentWithUnregistered extends Component {
   render () {
     const data = {

libraries/svelte/src/basic-tests.js

@@ -24,6 +24,7 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
+  ComponentWithMethods,
 } from "./components";
 import { tick } from "svelte";
 
@@ -125,6 +126,12 @@ describe("basic support", function() {
       expect(data).to.eql("svelte");
     });
 
+    it('will not overwrite methods', function () {
+      new ComponentWithMethods({ target: scratch });
+      const wc = scratch.querySelector('#wc');
+      expect(wc.innerText).to.eql('Success');
+    })
+
     // it('will set boolean attributes on a Custom Element that has not already been defined and upgraded', function() {
     //   new ComponentWithUnregistered({ target: scratch });
     //   let wc = scratch.querySelector("#wc");

libraries/svelte/src/components.js

@@ -19,6 +19,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 export { default as ComponentWithoutChildren } from './components/ComponentWithoutChildren.svelte';
 export { default as ComponentWithChildren } from './components/ComponentWithChildren.svelte';
@@ -28,3 +29,4 @@ export { default as ComponentWithProperties } from './components/ComponentWithPr
 export { default as ComponentWithUnregistered } from './components/ComponentWithUnregistered.svelte';
 export { default as ComponentWithImperativeEvent } from './components/ComponentWithImperativeEvent.svelte';
 export { default as ComponentWithDeclarativeEvent } from './components/ComponentWithDeclarativeEvent.svelte';
+export { default as ComponentWithMethods } from './components/ComponentWithMethods.svelte';

libraries/svelte/src/components/ComponentWithMethods.svelte

@@ -0,0 +1 @@
+<ce-with-methods id="wc" true></ce-with-methods>

libraries/vue/src/basic-tests.js

@@ -24,7 +24,8 @@ import {
   ComponentWithProperties,
   ComponentWithUnregistered,
   ComponentWithImperativeEvent,
-  ComponentWithDeclarativeEvent
+  ComponentWithDeclarativeEvent,
+  ComponentWithMethods
 } from "./components";
 import { expect } from "chai";
 
@@ -147,6 +148,13 @@ describe("basic support", function() {
       expect(data).to.eql("Vue");
     });
 
+    it('will not overwrite methods', function () {
+     const app = createApp(ComponentWithMethods);
+     app.mount(scratch);
+     const wc = scratch.querySelector('#wc');
+     expect(wc.innerText).to.eql('Success');
+    })
+
     // it('will set boolean attributes on a Custom Element that has not already been defined and upgraded', function() {
     //   let root = new ComponentWithUnregistered().$mount(scratch).$el;
     //   let wc = root.querySelector('#wc');

libraries/vue/src/components.js

@@ -20,6 +20,7 @@ import 'ce-without-children';
 import 'ce-with-children';
 import 'ce-with-properties';
 import 'ce-with-event';
+import 'ce-with-methods';
 
 export const ComponentWithoutChildren = defineComponent({
   template: `
@@ -100,6 +101,16 @@ export const ComponentWithProperties = defineComponent({
   }
 });
 
+export const ComponentWithMethods = defineComponent({
+  template: `
+    <div>
+      <ce-with-methods id="wc"
+        :test.attr="true"
+      ></ce-with-methods>
+    </div>
+  `
+})
+
 export const ComponentWithUnregistered = defineComponent({
   template: `
     <div>