Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Live session 2 lightning web component
Similar to Live session 2 lightning web component (20)
Recently uploaded
Recently uploaded (20)
Live session 2 lightning web component
- 2. FREE WEEKLY LWC SESSION TIMINGS Sunday 8PM IST 10:30AM EST 7:30 AM PST
- 4. Agenda Custom Element Shadow DOM HTML Template HTML Imports
- 5. Traditional Web Application Vs Web Application with Web Components
- 6. Web Components are Browser Standards designed by W3C
- 7. Web Component is the skeleton underneath the structure
- 12. Custom Element Create Custom HTML tags Create Custom Class Lifecyle Methods Available
- 13. Code Snippet
- 14. DOM Code Snippet
- 15. Shadow DOM Used for Self Contained Components Encapsulates style and markup Create with element.attachShadow({mode.open}) Creates a “Shadow Root” that we can reference and interact with
- 18. Shadow DOM Terminology Shadow host Shadow tree Shadow boundary Shadow root
- 19. Code Snippet
- 20. Code Snippet - Inspect
- 21. HTML Templates Define the encapsulated markup of web component Template tag stores markup on page Include both HTML and CSS in template
- 22. Code Snippet
- 23. HTML Imports Imports allow you to include HTML documents within other HTML documents. HTML imports use the <link>element to reference the file that you wish to import <head> <link rel="import" href="/path/to/template.html"> </head>
- 25. Supported JavaScript Lightning Web Components JavaScript support includes: ES6 (ECMAScript 2015) ES7 (ECMAScript 2016) ES8 (ECMAScript 2017)— excluding Shared Memory and Atomics ES9 (ECMAScript 2018)— including only Object Spread Properties (not Object Rest Properties)
- 26. Supported Salesforce Experiences and Tools Lightning Experience Salesforce App Lightning Communities Lightning App Builder Experience Builder Standalone Apps Lightning Components for Visualforce Lightning Out (beta) Custom Tabs Utility Bars Flows First-Generation Managed Packages
- 27. Supported Salesforce Experiences and Tools Second-Generation Managed Packages Unmanaged Packages Unlocked Packages Change Sets Metadata API Tooling API EMP API Embedded Service Chat •Gmail and Outlook integration
- 29. Component File Structure HTML File JavaScript File Configuration File CSS File
- 30. LWC Must Contain HTML File JavaScript File Metadata Configuration File
- 31. Folder and File Naming Convention Must begin with a lowercase letter – eg- sampleComponent, myFirstComponent Must contain only alphanumeric or underscore character Must be unique in namespace Cannot include white space – “my firstComp” isn’t a valid name Cannot end with underscore Cannot contain two consecutive underscore Cannot contain a hyphen
- 32. HTML File
- 33. JavaScript File
- 34. JS Module ECMAScript 2015 (ES6) introduced module system. . Modules can use special directives export and import to call functions of one module from another one
- 36. Default Exports 1 2 3 export default class HelloWorld extends LightningElement {} Modules that need to export only a single value can use default exports. There can be only one default export per module.
- 37. Named Export With named exports, one can have multiple named exports per file. The name of imported module has to be the same as the name of the exported module. // exports from ./MyComponent.js file export const MyComponent = () => {} export const MyComponent2 = () => {}
- 38. Importing a Module To be able to consume a module, use the import keyword. import { LightningElement } from 'lwc’; The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module. LightningElement is a custom wrapper of the standard HTML element.
- 41. Agenda Component Reference Developer Guide Playground Sample Gallery -https://trailhead.salesforce.com/sample-gallery
- 44. Agenda Retrieve Sample Project from Github
- 47. LWC Local Development INSTALL THE LOCAL DEVELOPMENT SERVER CREATE OR CLONE A SALESFORCE DX PROJECT ENABLE DEV HUB IN AN ORG CREATE A SCRATCH ORG START THE SERVER
- 48. Connected to the Server
- 49. Q&A
- 50. Thank you