教程-Web Components & Stencil.js – Build Custom HTML Elements
$125|BESTSELLER|LastUpdated12/2018
Duration:8.5hours|Video:h264,1280x720|Audio:AAC,48KHz,2Ch| 
Genre:eLearning|Language:English+Sub|139Lectures

ACompleteIntroductiontobuildingCustomHTMLElements/WebComponentswithandwithoutStencilJS

Whatyou'lllearn
Buildyourownre-usableHTMLelementsthatyoucanuseinyourownprojectsorsharewithotherdevelopers
Overcomethelimitationsofthebuilt-inHTMLelementswiththepowerofHTML,CSSandJavaScriptonly

Requirements
BasicJavaScriptknowledgeisrequired(basesyntax,DOMbasics,objectsbasics)
ES6+JavaScriptknowledge(classesetc)isaplusbutnotamust-have

Description
Let'sfaceit:YougotthousandsofHTMLtagstochoosefrombutsomereallyhelpfulones(<tabs>,<side-drawer>,<modal>,...)aremissing.

WhatifyoucouldbuildyourownHTMLtags?

WithoutframeworkslikeAngular,librarieslikeReactorexpertJavaScriptknowledgeingeneral.Justwithamagic,native-JavaScriptfeaturecalled"WebComponents"(or"customHTMLelements").

WebComponentsareacombinationofvariousspecificationsthatarebakedintothebrowser.Gettingstartedwiththesefeaturesisabreezeandyou'llquicklybeabletobuildyourownpowerfulandre-usable(evenacrossprojects!)customHTMLelements.

Suchcustomelementsdon'treplaceAngular,ReactorVuethough-insteadyoucaneasilyusetheminANYwebproject,includingprojectsusingsuchframeworksandlibraries.

Inthiscourse,you'lllearnthisfromscratch.

Butwewon'tstopthere.Whilstgettingstartedisfairlyeasy,morecomplexcomponentswillbemoredifficulttocreate.Stencil.jsisatoolthatmakesthecreationofsuchnativewebcomponentsmucheasierbyusingmodernfeatureslikeTypeScriptandJSX(don'tknowthat?Noworries,you'lllearnitinthecourse!).

Indetail,inthiscourseyouwilllearn:

howtobuildre-usable,lightweightcustomHTMLelementswithnativebrowserfeatures

howtobuildwebcomponentsofallcomplexities-fromasimpletooltiptomodalsorsidedrawers

howtopassdataintoyourownwebcomponentsanduseitthere

howtoemityourowncustomeventswhichyoucanlistentoinJavaScript

howtousetheShadowDOMtoscopeyourCSSstylestoyourcustomelements

howtouseStencil.jstogetamucheasierdevelopmentworkflow

howtousethemanyfeaturesStencil.jsprovidestobuildnativewebcomponentswaymoreefficiently

howtodeploy/re-useyourownwebcomponentsinANYprojectusingANYJavaScriptframeworklikeAngular,ReactorVue(ornoneatall!)

Prerequisites:

BasicJavaScriptknowledgeisamust-have

ES6JavaScriptknowledge(const,let,classes,...)isstronglyrecommendedbutnotstrictlyrequired-abriefrefresherisprovidedaspartofthecourse

NOJavaScriptframeworkknowledge(e.g.Angular,React,Vue)isrequired

NOTypeScriptorJSXknowledgeisrequired

Let'sdiveintothisexcitingtechnologytogether!

Whothiscourseisfor:
Everyonewho'sinterestedinbuildingcustomHTMLtags!