Create one Web Component and want to that in VF page, Is this possible?
[SalesForce] Is it possible to add Lighting Web Component in the Visual force Page
Related Solutions
Is it possible to read child Web Component property from parent Aura Component?
Yes you can. you are trying to call a method or a property in your LWC component from aura component the LWC way but it should be the aura way.
Simple Demonstration:
Parent Aura component markup
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
<p>Main Container</p>
<lightning:button variant="base" label="Base" title="Base action" onclick="{! c.handleClick }"/>
<c:stackTest aura:id="stackchild"></c:stackTest>
</aura:component>
Parent controller:
({
handleClick : function(component, event, helper) {
alert("Hello from container" + component.find("stackchild"));
component.find("stackchild").raisealert();
}
})
Child LWC Component markup:
<template>
<p>Hello: {myName}</p>
</template>
Child component controller file:
import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class StackTest extends LightningElement {
@api myName = 'Hello';
@api raisealert(){
alert("Hello from child");
}
}
The key in this example is i am tagging an aura:id to LWC component when i include it in aura component and then using component.find to call its public properties and methods(@Api annotated)
<c:stackTest aura:id="stackchild"></c:stackTest>
That's not possible for prototypical inheritance. But you can use Mix-Ins to emulate multiple inheritances:
Abstract subclasses or mix-ins are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.
A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:
let calculatorMixin = Base => class extends Base {
calc() { }
};
let randomizerMixin = Base => class extends Base {
randomize() { }
};
A class that uses these mix-ins can then be written like this:
class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
Some additional resources: Mixins for Web Components
Best Answer
yes, it is possible for now Spring 19 only by means of lightning aura components.
LWC
aura
component, that includesLWC
from step 1 see doc how it worksaura
component from step 2