-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (87 loc) · 25.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><link rel="icon" href="/favicon.ico"/><title>Root</title><meta name="robots" content="index,follow"/><meta name="googlebot" content="index,follow"/><meta name="description" content="Personal Knowledge Space"/><meta property="og:title" content="Root"/><meta property="og:description" content="Personal Knowledge Space"/><meta property="og:url" content="localhost:3000/"/><meta property="og:type" content="article"/><meta property="article:published_time" content="6/23/2023"/><meta property="article:modified_time" content="6/24/2023"/><link rel="canonical" href="localhost:3000/"/><meta name="next-head-count" content="14"/><link rel="preload" href="/_next/static/css/8e7b7e4bce421c0a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/8e7b7e4bce421c0a.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-3d209faeb64f2f97.js" defer=""></script><script src="/_next/static/chunks/framework-28c999baf2863c3d.js" defer=""></script><script src="/_next/static/chunks/main-104451f3d1a5c4bc.js" defer=""></script><script src="/_next/static/chunks/pages/_app-6b338472289fe290.js" defer=""></script><script src="/_next/static/chunks/935-4dee79e80b8641c6.js" defer=""></script><script src="/_next/static/chunks/6-50972def09142ee2.js" defer=""></script><script src="/_next/static/chunks/pages/index-8bd773551d30eee0.js" defer=""></script><script src="/_next/static/kjmIMCUARuvOeiAzE64-0/_buildManifest.js" defer=""></script><script src="/_next/static/kjmIMCUARuvOeiAzE64-0/_ssgManifest.js" defer=""></script></head><body><div id="__next" data-reactroot=""><section class="ant-layout" style="width:100%;min-height:100%"><header class="ant-layout-header" style="position:fixed;isolation:isolate;z-index:1;width:100%;border-bottom:1px solid #d4dadf;height:64px;padding:0 24px 0 2px"><div class="ant-row ant-row-center" style="max-width:992px;justify-content:space-between;margin:0 auto"><div style="display:flex" class="ant-col ant-col-xs-20 ant-col-sm-4"></div><div class="ant-col gutter-row ant-col-xs-0 ant-col-sm-20 ant-col-md-20 ant-col-lg-19"><div class="ant-select ant-select-lg ant-select-auto-complete ant-select-single ant-select-allow-clear ant-select-show-search" style="width:100%"><div class="ant-select-selector"><span class="ant-select-selection-search"><input type="search" autoComplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" aria-activedescendant="undefined_list_0" value=""/></span><span class="ant-select-selection-placeholder">For full text search please use the '?' prefix. e.g. ? Onboarding</span></div></div></div><div style="display:none;align-items:center;justify-content:center" class="ant-col ant-col-xs-4 ant-col-sm-4 ant-col-md-0 ant-col-lg-0"><span role="img" aria-label="menu" style="font-size:24px" tabindex="-1" class="anticon anticon-menu"><svg viewBox="64 64 896 896" focusable="false" data-icon="menu" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M904 160H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0 624H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8zm0-312H120c-4.4 0-8 3.6-8 8v64c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-64c0-4.4-3.6-8-8-8z"></path></svg></span></div></div></header><section class="ant-layout" style="margin-top:64px;display:flex;flex-direction:row"><div class="site-layout-sidebar" style="flex:0 0 auto;width:calc(max((100% - 992px) / 2, 0px) + 200px);min-width:200px;padding-left:calc((100% - 992px) / 2)"><aside class="ant-layout-sider ant-layout-sider-dark" style="position:fixed;overflow:auto;height:calc(100vh - 64px);background-color:transparent;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"><div class="ant-layout-sider-children"></div></aside></div><main class="ant-layout-content side-layout-main" style="max-width:1200px;min-width:0;display:block"><div style="padding:0 24px"><div class="main-content" role="main"><div class="ant-row"><div class="ant-col ant-col-24"><div class="ant-row" style="margin-left:-10px;margin-right:-10px"><div style="padding-left:10px;padding-right:10px" class="ant-col ant-col-xs-24 ant-col-md-18"><div><h1 id="root">Root<a aria-hidden="true" class="anchor-heading icon-link" href="#root"></a></h1>
<h1 id="web-components-docs">Web Components DOCS<a aria-hidden="true" class="anchor-heading icon-link" href="#web-components-docs"></a></h1>
<p>Esta es una documentación de web components basada en el libro <em>Web Component Essentials</em> de Cory Rylan <a href="https://webcomponent.dev/">https://webcomponent.dev/</a></p>
<p></p><p></p><div class="portal-container">
<div class="portal-head">
<div class="portal-backlink">
<div class="portal-title">From <span class="portal-text-title">Web Components</span></div>
<a href="/notes/zkfccjgcs7b7pqvirwby57p" class="portal-arrow">Go to text <span class="right-arrow">→</span></a>
</div>
</div>
<div id="portal-parent-anchor" class="portal-parent" markdown="1">
<div class="portal-parent-fader-top"></div>
<div class="portal-parent-fader-bottom"></div><h3 id="qué-es-un-web-component">Qué es un Web Component<a aria-hidden="true" class="anchor-heading icon-link" href="#qué-es-un-web-component"></a></h3>
<p>Un Web Component es una pieza aislada de interfaz con una responsabilidad única. Existen muchos frameworks que exponen esta idea de componentes pero las diferencias entre ellos impiden que podamos compartir los componentes en las distintas aplicaciones. La API de Web Components permite solucionar esta fragmentación dando reusabilidad a lo largo de las aplicaciones independientemente del framework utilizado.</p>
<p>La API de Web Components es una colección de APIs del navegador que en conjunto forman un combo de herramientas altamente reutilizables. </p>
<h3 id="apis-fundamentales-de-los-web-components">APIS Fundamentales de los Web Components<a aria-hidden="true" class="anchor-heading icon-link" href="#apis-fundamentales-de-los-web-components"></a></h3>
<ul>
<li><a href="/notes/1dym5u9edx4r2i85mmldv4m">Custom Elements</a></li>
<li><a href="/notes/efwvmwe8ctv925mkt5wrl5z">Shadow Dow</a></li>
<li><a href="/notes/d9i2loe47cp2m0xxwdkny69">Content Slot</a></li>
<li><a href="/notes/lf0t5f3evkower2vnkbazq5">Template</a></li>
</ul>
<p>Podemos ver la puesta en común de estas APIS y como funcionan para crear un Web Component en la primera parte de nuestro ejemplo de <a href="/notes/olp8vo3frywt998l6h1f3ws">Dropdown</a></p>
<h3 id="comunicacion-entre-componentes">Comunicacion entre componentes<a aria-hidden="true" class="anchor-heading icon-link" href="#comunicacion-entre-componentes"></a></h3>
<p>En esta sección podemos leer sobre los distintos metodos que tienen los Web Components para <a href="/notes/jz2mgtp1h1frnrzmeqocl36">comunicars</a> entre ellos y con el resto de la aplicación.</p>
<ul>
<li><a href="/notes/6ru1efirtn5teux1y43551d">Propiedades</a></li>
<li><a href="/notes/tnijj658ufqhea7vlwft2r9">Atributos Personalizados</a></li>
<li><a href="/notes/h8e4ccyda8x2xn10jqv3qb2">Eventos y Eventos Personalizados</a></li>
</ul>
<h3 id="estilos">Estilos<a aria-hidden="true" class="anchor-heading icon-link" href="#estilos"></a></h3>
<p>En esta seccion podremos encontrar las distintas estrategias que podemos tomar para <a href="/notes/f1sy95vvl2cyfpto8miwxhh">estilar</a> nuestros componentes.</p>
<ul>
<li><a href="/notes/fcj7t4u5hm6t7amh45uid1n">Encapsulamiento</a></li>
<li><a href="/notes/5vihc22zv3ux3lduf3aaab6">Propiedades Personalizadas</a></li>
<li><a href="/notes/lgs19vv9v8nq2megefqyprn">CSS Parts API</a></li>
<li><a href="/notes/3lzfo9vm01y09nvjbji1g25">Slotted Elements</a></li>
</ul>
<h3 id="temas">Temas<a aria-hidden="true" class="anchor-heading icon-link" href="#temas"></a></h3>
<p> Aca podemos ver un ejemplo de como podriamos manejar <a href="/notes/wulm1e3c9d69le8k1pa5lxh">Temas</a> en nuestros componentes.</p>
<ul>
<li><a href="/notes/kguufsu71atg67ixw875jy1">Root Host Scope</a></li>
</ul>
<h3 id="lifecycle">Lifecycle<a aria-hidden="true" class="anchor-heading icon-link" href="#lifecycle"></a></h3>
<p>Describimos los hooks del <a href="/notes/gxmnngmtnylxfipxr0980ej">Ciclo de vida</a> de los Web Components.</p>
<ul>
<li><a href="/notes/uw1ie7bctc50l5lz3cytw4i">Constructor Connected Callback</a></li>
<li><a href="/notes/37nsf4f13y89b6j5pgbmd9o">Attribute Changed</a></li>
<li><a href="/notes/u5xmw029xvzv9yc7s3o152j">Disconnected Callback</a></li>
<li><a href="/notes/iqbswjrdrlwkkca05u33nov">Adopted Callback</a></li>
</ul>
<h3 id="jerarquia-y-arquitectura">Jerarquia y Arquitectura<a aria-hidden="true" class="anchor-heading icon-link" href="#jerarquia-y-arquitectura"></a></h3>
<p>En esta seccion vemos el data flow de los componentes y buenas practicas para su <a href="/notes/a3xw0se9vtlbizvaguc85sw">Arquitectura</a></p>
<ul>
<li><a href="/notes/nz23kt8zcx99qr9ei3td0kg">Data Flow</a></li>
</ul>
<h3 id="deployment">Deployment<a aria-hidden="true" class="anchor-heading icon-link" href="#deployment"></a></h3>
<p>Vemos como <a href="/notes/1mhjcs0yb8e8xp0x1g030qq">Desplegar</a> nuestros componentes por NPM.</p>
<ul>
<li><a href="/notes/pizkajsyb0lra3nyjuiueiq">NPM</a></li>
<li><a href="/notes/l1ofcgjdkle0j55lk21ujrq">Soporte de navegador</a></li>
</ul>
<h3 id="frameworks-integration">Frameworks Integration<a aria-hidden="true" class="anchor-heading icon-link" href="#frameworks-integration"></a></h3>
<p>Vemos como podemos <a href="/notes/hgfihscw1sv5ewje8sm80r9">Integrar</a> nuestros componentes en proyectos de los distintos frameworks.</p>
<ul>
<li><a href="/notes/3m8fv43uyem4l9uc3y7780z">Angular</a></li>
<li><a href="/notes/tqrfdzuafg2zfze5bj19sns">React</a></li>
<li><a href="/notes/95mp2snular2q0j2irih6ht">Vue</a></li>
</ul>
<h3 id="soluciones-de-alto-nivel">Soluciones de alto nivel<a aria-hidden="true" class="anchor-heading icon-link" href="#soluciones-de-alto-nivel"></a></h3>
<p>Vemos dos <a href="/notes/09edenuzuoqp22bxje5l36y">Soluciones</a> de alto nivel que podemos utilizar para trabajar con componentes.</p>
<ul>
<li><a href="/notes/ik9twe6vf70yht7mt79j88t">Libreria Lit</a></li>
<li><a href="/notes/gl5xjjjpsuuiazam6swp1qp">Framework StencilJS</a></li>
</ul>
<h3 id="ejemplos">Ejemplos<a aria-hidden="true" class="anchor-heading icon-link" href="#ejemplos"></a></h3>
<p>Tenemos nuestro ejemplo de <a href="/notes/olp8vo3frywt998l6h1f3ws">Dropdown</a> que utilizamos en varias secciones para que vaya tomando complejidad.</p>
<h3 id="herramientas-extras">Herramientas Extras<a aria-hidden="true" class="anchor-heading icon-link" href="#herramientas-extras"></a></h3>
<ul>
<li><a href="/notes/m75y7l3tusc1xrp3atjv1jz">Webpack</a></li>
</ul>
</div></div><p></p><p></p>
<hr>
<strong>Children</strong>
<ol>
<li><a href="/notes/zkfccjgcs7b7pqvirwby57p">Web Components</a></li>
</ol></div></div><div style="padding-left:10px;padding-right:10px" class="ant-col ant-col-xs-0 ant-col-md-6"><div><div class=""><div class="ant-anchor-wrapper dendron-toc" style="max-height:calc(100vh - 64px);z-index:1"><div class="ant-anchor"><div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div><div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#web-components-docs" title="Web Components DOCS">Web Components DOCS</a></div></div></div></div></div></div></div></div></div></div></div><div class="ant-divider ant-divider-horizontal" role="separator"></div><footer class="ant-layout-footer" style="padding:0 24px 24px"></footer></main></section></section></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"body":"\u003ch1 id=\"root\"\u003eRoot\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#root\"\u003e\u003c/a\u003e\u003c/h1\u003e\n\u003ch1 id=\"web-components-docs\"\u003eWeb Components DOCS\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#web-components-docs\"\u003e\u003c/a\u003e\u003c/h1\u003e\n\u003cp\u003eEsta es una documentación de web components basada en el libro \u003cem\u003eWeb Component Essentials\u003c/em\u003e de Cory Rylan \u003ca href=\"https://webcomponent.dev/\"\u003ehttps://webcomponent.dev/\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\u003cdiv class=\"portal-container\"\u003e\n\u003cdiv class=\"portal-head\"\u003e\n\u003cdiv class=\"portal-backlink\"\u003e\n\u003cdiv class=\"portal-title\"\u003eFrom \u003cspan class=\"portal-text-title\"\u003eWeb Components\u003c/span\u003e\u003c/div\u003e\n\u003ca href=\"/notes/zkfccjgcs7b7pqvirwby57p\" class=\"portal-arrow\"\u003eGo to text \u003cspan class=\"right-arrow\"\u003e→\u003c/span\u003e\u003c/a\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"portal-parent-anchor\" class=\"portal-parent\" markdown=\"1\"\u003e\n\u003cdiv class=\"portal-parent-fader-top\"\u003e\u003c/div\u003e\n\u003cdiv class=\"portal-parent-fader-bottom\"\u003e\u003c/div\u003e\u003ch3 id=\"qué-es-un-web-component\"\u003eQué es un Web Component\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#qué-es-un-web-component\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eUn Web Component es una pieza aislada de interfaz con una responsabilidad única. Existen muchos frameworks que exponen esta idea de componentes pero las diferencias entre ellos impiden que podamos compartir los componentes en las distintas aplicaciones. La API de Web Components permite solucionar esta fragmentación dando reusabilidad a lo largo de las aplicaciones independientemente del framework utilizado.\u003c/p\u003e\n\u003cp\u003eLa API de Web Components es una colección de APIs del navegador que en conjunto forman un combo de herramientas altamente reutilizables. \u003c/p\u003e\n\u003ch3 id=\"apis-fundamentales-de-los-web-components\"\u003eAPIS Fundamentales de los Web Components\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#apis-fundamentales-de-los-web-components\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/1dym5u9edx4r2i85mmldv4m\"\u003eCustom Elements\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/efwvmwe8ctv925mkt5wrl5z\"\u003eShadow Dow\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/d9i2loe47cp2m0xxwdkny69\"\u003eContent Slot\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/lf0t5f3evkower2vnkbazq5\"\u003eTemplate\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003ePodemos ver la puesta en común de estas APIS y como funcionan para crear un Web Component en la primera parte de nuestro ejemplo de \u003ca href=\"/notes/olp8vo3frywt998l6h1f3ws\"\u003eDropdown\u003c/a\u003e\u003c/p\u003e\n\u003ch3 id=\"comunicacion-entre-componentes\"\u003eComunicacion entre componentes\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#comunicacion-entre-componentes\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eEn esta sección podemos leer sobre los distintos metodos que tienen los Web Components para \u003ca href=\"/notes/jz2mgtp1h1frnrzmeqocl36\"\u003ecomunicars\u003c/a\u003e entre ellos y con el resto de la aplicación.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/6ru1efirtn5teux1y43551d\"\u003ePropiedades\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/tnijj658ufqhea7vlwft2r9\"\u003eAtributos Personalizados\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/h8e4ccyda8x2xn10jqv3qb2\"\u003eEventos y Eventos Personalizados\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"estilos\"\u003eEstilos\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#estilos\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eEn esta seccion podremos encontrar las distintas estrategias que podemos tomar para \u003ca href=\"/notes/f1sy95vvl2cyfpto8miwxhh\"\u003eestilar\u003c/a\u003e nuestros componentes.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/fcj7t4u5hm6t7amh45uid1n\"\u003eEncapsulamiento\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/5vihc22zv3ux3lduf3aaab6\"\u003ePropiedades Personalizadas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/lgs19vv9v8nq2megefqyprn\"\u003eCSS Parts API\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/3lzfo9vm01y09nvjbji1g25\"\u003eSlotted Elements\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"temas\"\u003eTemas\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#temas\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003e Aca podemos ver un ejemplo de como podriamos manejar \u003ca href=\"/notes/wulm1e3c9d69le8k1pa5lxh\"\u003eTemas\u003c/a\u003e en nuestros componentes.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/kguufsu71atg67ixw875jy1\"\u003eRoot Host Scope\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"lifecycle\"\u003eLifecycle\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#lifecycle\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eDescribimos los hooks del \u003ca href=\"/notes/gxmnngmtnylxfipxr0980ej\"\u003eCiclo de vida\u003c/a\u003e de los Web Components.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/uw1ie7bctc50l5lz3cytw4i\"\u003eConstructor Connected Callback\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/37nsf4f13y89b6j5pgbmd9o\"\u003eAttribute Changed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/u5xmw029xvzv9yc7s3o152j\"\u003eDisconnected Callback\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/iqbswjrdrlwkkca05u33nov\"\u003eAdopted Callback\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"jerarquia-y-arquitectura\"\u003eJerarquia y Arquitectura\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#jerarquia-y-arquitectura\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eEn esta seccion vemos el data flow de los componentes y buenas practicas para su \u003ca href=\"/notes/a3xw0se9vtlbizvaguc85sw\"\u003eArquitectura\u003c/a\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/nz23kt8zcx99qr9ei3td0kg\"\u003eData Flow\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"deployment\"\u003eDeployment\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#deployment\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eVemos como \u003ca href=\"/notes/1mhjcs0yb8e8xp0x1g030qq\"\u003eDesplegar\u003c/a\u003e nuestros componentes por NPM.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/pizkajsyb0lra3nyjuiueiq\"\u003eNPM\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/l1ofcgjdkle0j55lk21ujrq\"\u003eSoporte de navegador\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"frameworks-integration\"\u003eFrameworks Integration\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#frameworks-integration\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eVemos como podemos \u003ca href=\"/notes/hgfihscw1sv5ewje8sm80r9\"\u003eIntegrar\u003c/a\u003e nuestros componentes en proyectos de los distintos frameworks.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/3m8fv43uyem4l9uc3y7780z\"\u003eAngular\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/tqrfdzuafg2zfze5bj19sns\"\u003eReact\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/95mp2snular2q0j2irih6ht\"\u003eVue\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"soluciones-de-alto-nivel\"\u003eSoluciones de alto nivel\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#soluciones-de-alto-nivel\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eVemos dos \u003ca href=\"/notes/09edenuzuoqp22bxje5l36y\"\u003eSoluciones\u003c/a\u003e de alto nivel que podemos utilizar para trabajar con componentes.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/ik9twe6vf70yht7mt79j88t\"\u003eLibreria Lit\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"/notes/gl5xjjjpsuuiazam6swp1qp\"\u003eFramework StencilJS\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"ejemplos\"\u003eEjemplos\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#ejemplos\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cp\u003eTenemos nuestro ejemplo de \u003ca href=\"/notes/olp8vo3frywt998l6h1f3ws\"\u003eDropdown\u003c/a\u003e que utilizamos en varias secciones para que vaya tomando complejidad.\u003c/p\u003e\n\u003ch3 id=\"herramientas-extras\"\u003eHerramientas Extras\u003ca aria-hidden=\"true\" class=\"anchor-heading icon-link\" href=\"#herramientas-extras\"\u003e\u003c/a\u003e\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"/notes/m75y7l3tusc1xrp3atjv1jz\"\u003eWebpack\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/div\u003e\u003c/div\u003e\u003cp\u003e\u003c/p\u003e\u003cp\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003cstrong\u003eChildren\u003c/strong\u003e\n\u003col\u003e\n\u003cli\u003e\u003ca href=\"/notes/zkfccjgcs7b7pqvirwby57p\"\u003eWeb Components\u003c/a\u003e\u003c/li\u003e\n\u003c/ol\u003e","note":{"id":"guomymvu5xxkrbvedoncjdw","title":"Root","desc":"","updated":1687572145233,"created":1687478467553,"custom":{"nav_order":0,"permalink":"/"},"fname":"root","type":"note","vault":{"fsPath":".","selfContained":true,"name":"docs"},"contentHash":"7b933c6af26999e634508c56679dd466","links":[{"type":"ref","from":{"fname":"root","id":"guomymvu5xxkrbvedoncjdw","vaultName":"docs"},"value":"web-components","position":{"start":{"line":6,"column":1,"offset":155},"end":{"line":6,"column":20,"offset":174},"indent":[]},"xvault":false,"to":{"fname":"web-components"}}],"anchors":{"web-components-docs":{"type":"header","text":"Web Components DOCS","value":"web-components-docs","line":8,"column":0,"depth":1}},"children":["zkfccjgcs7b7pqvirwby57p"],"parent":null,"data":{},"body":"\n# Web Components DOCS\n\nEsta es una documentación de web components basada en el libro *Web Component Essentials* de Cory Rylan https://webcomponent.dev/\n\n![[web-components]]\n\n"},"config":{"version":5,"dev":{"enablePreviewV2":true,"enableSelfContainedVaults":true},"commands":{"lookup":{"note":{"selectionMode":"extract","confirmVaultOnCreate":true,"vaultSelectionModeOnCreate":"smart","leaveTrace":false,"bubbleUpCreateNew":true,"fuzzThreshold":0.2}},"randomNote":{},"insertNoteLink":{"aliasMode":"none","enableMultiSelect":false},"insertNoteIndex":{"enableMarker":false},"copyNoteLink":{"aliasMode":"title"},"templateHierarchy":"template"},"workspace":{"vaults":[{"fsPath":".","selfContained":true,"name":"docs"}],"journal":{"dailyDomain":"daily","name":"journal","dateFormat":"y.MM.dd","addBehavior":"childOfDomain"},"scratch":{"name":"scratch","dateFormat":"y.MM.dd.HHmmss","addBehavior":"asOwnDomain"},"task":{"name":"task","dateFormat":"y.MM.dd","addBehavior":"asOwnDomain","statusSymbols":{"":" ","wip":"w","done":"x","assigned":"a","moved":"m","blocked":"b","delegated":"l","dropped":"d","pending":"y"},"taskCompleteStatus":["done","x"],"prioritySymbols":{"H":"high","M":"medium","L":"low"},"todoIntegration":false,"createTaskSelectionType":"selection2link"},"graph":{"zoomSpeed":1,"createStub":false},"enableAutoCreateOnDefinition":false,"enableXVaultWikiLink":false,"enableRemoteVaultInit":true,"enableUserTags":true,"enableHashTags":true,"workspaceVaultSyncMode":"noCommit","enableAutoFoldFrontmatter":false,"enableEditorDecorations":true,"maxPreviewsCached":10,"maxNoteLength":204800,"enableFullHierarchyNoteTitle":false},"preview":{"enableFMTitle":true,"enableNoteTitleForLink":true,"enableFrontmatterTags":true,"enableHashesForFMTags":false,"enablePrettyRefs":true,"enableKatex":true,"automaticallyShowPreview":false},"publishing":{"enableFMTitle":true,"enableNoteTitleForLink":true,"enablePrettyRefs":true,"enableKatex":true,"copyAssets":true,"siteHierarchies":["root"],"writeStubs":false,"siteRootDir":"docs","seo":{"title":"Dendron","description":"Personal Knowledge Space"},"github":{"enableEditLink":true,"editLinkText":"Edit this page on GitHub","editBranch":"main","editViewMode":"tree"},"enableSiteLastModified":true,"enableFrontmatterTags":true,"enableHashesForFMTags":false,"enableRandomlyColoredTags":true,"enableTaskNotes":true,"enablePrettyLinks":true,"searchMode":"search","siteUrl":"localhost:3000","siteFaviconPath":"favicon.ico","siteIndex":"root"}},"customHeadContent":null,"noteIndex":{"id":"guomymvu5xxkrbvedoncjdw","title":"Root","desc":"","updated":1687572145233,"created":1687478467553,"custom":{"nav_order":0,"permalink":"/"},"fname":"root","type":"note","vault":{"fsPath":".","selfContained":true,"name":"docs"},"contentHash":"7b933c6af26999e634508c56679dd466","links":[{"type":"ref","from":{"fname":"root","id":"guomymvu5xxkrbvedoncjdw","vaultName":"docs"},"value":"web-components","position":{"start":{"line":6,"column":1,"offset":155},"end":{"line":6,"column":20,"offset":174},"indent":[]},"xvault":false,"to":{"fname":"web-components"}}],"anchors":{"web-components-docs":{"type":"header","text":"Web Components DOCS","value":"web-components-docs","line":8,"column":0,"depth":1}},"children":["zkfccjgcs7b7pqvirwby57p"],"parent":null,"data":{},"body":"\n# Web Components DOCS\n\nEsta es una documentación de web components basada en el libro *Web Component Essentials* de Cory Rylan https://webcomponent.dev/\n\n![[web-components]]\n\n"},"collectionChildren":null},"__N_SSG":true},"page":"/","query":{},"buildId":"kjmIMCUARuvOeiAzE64-0","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>