Skip to content

Commit bf758e0

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 3c383f1 commit bf758e0

File tree

1 file changed

+152
-57
lines changed

1 file changed

+152
-57
lines changed

‎html-components/html-components.html‎

Lines changed: 152 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -252,23 +252,21 @@ <h3>
252252
<div style='margin-top:50px'>
253253
<h3>
254254
Boiler Plate
255-
<br>
256-
<a href='#'>
257-
init-hdr.js
258-
</a>
259255
</h3>
260256
<p>
257+
<b>
258+
warning : this extension is not quite stable yet
259+
</b>
260+
<br>
261261
many of the official components, at this time, require some boiler plate code, mainly small dependencies.
262262
</p>
263263
<p>
264264
<code>
265-
http://libs.ext-code.com/js/dom/init-hdr/init-hdr.js
265+
http://libs.ext-code.com/js/dom/component/component.js?init
266266
</code>
267267
<br>
268-
provides this boiler plate,
269-
<b>
270-
warning : this library is not stable yet
271-
</b>
268+
adding the init search parameter automatically sets up the default boilerplate, which for most of the official
269+
components is all that is required.
272270
</p>
273271

274272
<p>
@@ -280,7 +278,7 @@ <h3>
280278
</div>
281279

282280

283-
<div style='margin-top:30px'>
281+
<div style='margin-top:50px;margin-bottom:50px'>
284282

285283
<p>
286284
view the full list of components
@@ -302,26 +300,45 @@ <h3>
302300
</a>
303301
</p>
304302

303+
</div>
304+
305+
306+
<div>
305307
<p>
306-
to me a component / module will have a standard lifecycle that is
308+
a component / module will has a standard lifecycle that is
307309
</p>
310+
308311
<ul>
309312
<li>
310-
initmod, this is where local depencies are passed to the component, they fundamentally should not be relying on global
311-
state to receive their local depencies
313+
<b>
314+
initmod
315+
</b>
316+
<br>
317+
This is where local depencies are / can be passed to the component
318+
<br>
319+
They fundamentally should not be relying on global state to receive their local depencies
312320
</li>
313321
<li>
314-
init, this is where the component first get executed, its an asynchronous function that allows the component to check
322+
<b>
323+
init
324+
</b>
325+
<br>
326+
This is where the component first get executed, its an asynchronous function that allows the component to check
315327
that it has everything it needs to run, including access to the network to load resources it may need
316328
</li>
317329
<li>
318-
initdom, this is where the component is able to set up its ui, internally build the references it needs to run effeiciently
319-
in code
330+
<b>
331+
initdom
332+
</b>
333+
<br>
334+
This is where the component is able to set up its ui, internally build the references it needs to run effeiciently,
335+
it should be treated potentially as asynchronous
320336
</li>
321337
</ul>
338+
322339
<p>
323-
components should also be effectively namespaced so they are free to load any other components that they may need without having to
324-
worry that there will ever be a clash
340+
components are also effectively namespaced so they are free to load any other components that they may need without having to
341+
worry that there will ever be a clash of variables or tag names.
325342
</p>
326343
</div>
327344

@@ -332,16 +349,13 @@ <h3>
332349
init runs to be delayed until the loading stack is complete
333350
</p>
334351
</div>
352+
335353
<br>
336354
<br>
355+
337356
<div>
338357
<p>
339-
i demonstrate here a simple setup that loads a log-mod element whos function is to log toaster style messages
340-
in a webpage
341-
</p>
342-
<p>
343-
the common elements to this setup are the inclusion of the component script, the initialisation ( init ) function
344-
and the initdom
358+
Here is a simple setup that loads the log-mod element. Its function is to log toaster style messages in a webpage.
345359
</p>
346360

347361
<snippet-html-console id=ex1 component v2.0 src='ex/log-ex.html' style='display:block;margin-top:100px'></snippet-html-console>
@@ -350,9 +364,73 @@ <h3>
350364

351365
<div style='display:block;margin-top:100px'>
352366
<p>
353-
this is the code for the log-mod component
367+
the code for the log-mod component, note
354368
</p>
355369

370+
<ul>
371+
<li>
372+
the function that defines the api for the log-mod is wrapped in parenthesis' () making it a function expression,
373+
this is required.
374+
</li>
375+
<li>
376+
the arguments to the function ({mod,dom,host})
377+
378+
<ul>
379+
<li>
380+
<b>
381+
mod
382+
</b>
383+
<br>
384+
the modules own namespaced component module reference
385+
</li>
386+
<li>
387+
<b>
388+
dom
389+
</b>
390+
<br>
391+
a reference to the original dom node
392+
</li>
393+
<li>
394+
<b>
395+
host
396+
</b>
397+
<br>
398+
the replaced element
399+
</li>
400+
</ul>
401+
</li>
402+
<li>
403+
the function defines an object that is returned, thats its variable name is obj is purely an internal reference.
404+
<code>
405+
406+
var obj = {
407+
version : 'v2.0'
408+
};
409+
410+
</code>
411+
<br>
412+
<code>
413+
414+
return obj;
415+
416+
</code>
417+
</li>
418+
<li>
419+
any methods and properties that are exposed to the public are added as properties to the obj
420+
<br>
421+
<code>
422+
423+
obj.initmod = function(){}
424+
425+
obj.init = function(){}
426+
427+
obj.initdom = function(){}
428+
429+
</code>
430+
</li>
431+
432+
</ul>
433+
356434
<web-editor id=ex2 component fullsize src='https://libs.ext-code.com/html/log-mod/log-mod.html'></web-editor>
357435

358436
</div>
@@ -369,12 +447,24 @@ <h3>
369447

370448

371449
<div style="margin-bottom: 20px;">
372-
i include here a standard example of web components, which i feel went some way as to introducing the ability to include complex functionality
450+
here is an example of a standard web components
451+
<br>
452+
this went some way as to introducing the ability to include complex functionality
373453
into web pages, i feel however it fell short on a number of issues i have solved with my component.js library, these are
374454
<ul>
375455
<li>
376456
elements were scoped to the global namespace, always a problem when functionality gets ever more complex its only a matter
377457
of time before clashes occur
458+
<br>
459+
there is the proposal of
460+
<br>
461+
<code>
462+
463+
var registry = new ComponentRegistry();
464+
465+
</code>
466+
<br>
467+
but its still some time away
378468
</li>
379469
<li>
380470
methods and properties associated with the component were added to the host node of the element, again thats ok for simple
@@ -384,51 +474,56 @@ <h3>
384474
</div>
385475

386476

387-
<web-editor id=ex3 component fullsize>
477+
<web-editor id=ex3 component fullsize>
478+
479+
class newElement extends HTMLElement {
388480

389-
class newElement extends HTMLElement {
481+
constructor(){
390482

391-
constructor(){
392-
393-
super();
394-
395-
var root = this;
396-
397-
398-
}//constructor
399-
400-
connectedCallback(){}
401-
402-
disconnectedCallback(){}
483+
super();
403484

404-
static get observedAttributes(){}
485+
var root = this;
405486

406-
attributeChangedCallback(name,oldValue,newValue){}
407487

408-
adoptedCallback(){}
409-
410-
render(){}
411-
412-
// A getter/setter for a disabled property.
413-
get disabled(){}
414-
set disabled(){}
415-
416-
// A getter/setter for an open property.
417-
get open(){}
418-
set open(){}
419-
420-
}//class
488+
}//constructor
489+
490+
connectedCallback(){}
491+
492+
disconnectedCallback(){}
493+
494+
static get observedAttributes(){}
421495

422-
</web-editor>
496+
attributeChangedCallback(name,oldValue,newValue){}
497+
498+
adoptedCallback(){}
499+
500+
render(){}
501+
502+
// A getter/setter for a disabled property.
503+
get disabled(){}
504+
set disabled(){}
505+
506+
// A getter/setter for an open property.
507+
get open(){}
508+
set open(){}
509+
510+
}//class
423511

512+
</web-editor>
513+
424514
<br>
425515

426-
<div id=links>
516+
<div id=links style-'margin-top:50px;margin-bottom:50px'>
427517
<a href='https://web.dev/articles/custom-elements-v1'>Custom Elements v1 - Reusable Web Components<a>
518+
<br>
428519
<a href='https://syntackle.com/blog/web-components-and-custom-elements-5LuzI/'>Web Components & Custom Elements</a>
520+
<br>
429521
<a href='https://javascript.info/custom-elements'>Custom elements</a>
522+
<br>
430523
<a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements'>Using custom elements</a>
524+
<br>
431525
<a href='https://blog.jim-nielsen.com/2023/html-web-components-an-example/'>HTML Web Components: An Example</a>
526+
<br>
432527
<a href='https://web.archive.org/web/20140118032429/http://www.html5rocks.com/en/tutorials/webcomponents/customelements/'>Custom Element : Defining new elements in html</a>
433528
</div>
434529

0 commit comments

Comments
 (0)