>With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it.

I wouldn't say that React's component model is being ported to the browser, just that a component model is being implemented in the browser, independent of and different than React.

Microsoft ActiveX Dynamic HTML Behavior Components (HTC files, introduced in IE5, after DHTML finally started working well) allowed you to augment HTML in the same way, and that's very old technology (circa 1999 or so) compared to React.

https://news.ycombinator.com/item?id=27405137

>[...] At the time that NSAPI came around, JavaScript wasn't really much of a thing, and DHTML didn't exist, so not many people would have seriously thought of actually writing practical browser extensions in it. JavaScript was first thought of more as a way to wire together plugins, not implement them. You were supposed to use Java for that. To that end, Netscape developed LiveConnect.

>Microsoft eventually came out with "ActiveX Behavior Components" aka "Dynamic HTML (DHTML) Behaviors" aka "HTML Components (HTCs)" that enabled you to implement ActiveX controls with COM interfaces in all their glory and splendor, entirely in Visual Basic Script, JavsScript, or any other language supporting the "IScriptingEngine" plug-in interface, plus some XML. So you could plug in any scripting language engine, then write plug-ins in that language! (Easier said than done, though: it involved tons of OLE/COM plumbing and dynamic data type wrangling. But there were scripting engines for many popular scripting languages, like Python.) [...]

HTML Components:

https://en.wikipedia.org/wiki/HTML_Components

HTC Reference:

https://learn.microsoft.com/en-us/previous-versions/ms531018...

I used them to implement nested piemenu components in a way that let you easily augment them with html in the browser (which was the wall I'd hit with OLE, not being able to easily use an animated gif or html table as a pie menu item, for example, having to draw everything myself with Win32), so you could embed snippets of HTML to define the menu background, center, items, and dynamic feedback.

That worked nicely in conjunction with XSLT to transform XML models into HTML pages with embedded trees of HTML components.

For example, the Punkemon Pie Menus used an XML database of Punkeland regions and Punkemon characters to make a tree of nested pie menus.

JavaScript Pie Menus - Punkemon Pie Menus:

https://youtu.be/R5k4gJK-aWw?t=177

Pie Menu ActiveX Behavior Control (htc file as text):

https://donhopkins.com/home/PieMenu/piemenu.htc.txt

Punkemon Pie Menus XML Database (xml file as text):

https://donhopkins.com/home/PieMenu/punkemon.xml.txt

XSL Style Sheet (xsl file as text):

https://donhopkins.com/home/PieMenu/punkemon.xsl.txt

For example the XSLT transforms the XML Punkemon database into HTML with embedded nested <piemenu> <item> and arbitrary html, like a table inside one of the items to make a gigantic pie menu item at the bottom, whose purpose is more like an info panel than a menu item, just showing you some information about the magnified animated gif of the character in the top item.

ActiveX Pie Menus that "hit the wall" (discussion near end of video):

https://www.youtube.com/watch?v=nnC8x9x3Xag

>Well, I ran into a wall of complexity with this ActiveX control, and I wanted to be able to have as the menu items animated gifs, mpeg movies, fonts with nice attributes, and things like that. The first thought was "well let's just put a web browser in every item!", but that was a little heavy-handed. So instead I put the pie menus into the web browser as dynamic HTML components, which I'll show next.

All this stuff I explained in the video is incredibly obvious now, but it seemed really cool at the time in 2001, and it was a hell of a lot better and more web-centric than binary OLE/ActiveX controls. (Pardon my unabashed XML and Microsoft technology advocacy, but it really was a step up from what came before it, and you couldn't do anything remotely similar in Java!)

But it illustrates that the idea of augmenting and embedding html in components like that goes way back, and that HTML Web Components were obviously influenced by Microsoft ActiveX Behavior Controls more than they were React.

JavaScript Pie Menus: example of augmenting neste piemenu components with html:

https://youtu.be/R5k4gJK-aWw?t=339

Transcript:

Now the really convenient thing for user interface designers is that
the way these pie menus are specified in XML markup language.

This test pie menu has eight items here, and North has a sub menu with
four items. Now that map's very nicely into an XML tree.
It has a piemenu element, and that has a name and ID.

The neat things is that you can put arbitrary HTML inside of the XML,
and that is just copied and just dumped right into the middle of the
menu to make it look any way you want.
And then the menu, this pie menu item, contains, besides this
stuff to display in the middle an item, an item.

It contains eight items, and this item's name is north, and that's
its name to the program, which could be different, and that's
what is displayed to the user here.
Now it contains the sub piemenu, which is the North menu, and has even
more.

You can see how you can intersperse XML and HTML to specify all
this that you need to describe for the pie menu.

One of the really great advantages of using XML for the piemenu is
that there are many ways to generate XML and many things that are
represented by XML that you might want to make and then use for.
In the case of the punkemon pie menus I really didn't want to
make all those pie menus directly.

So maybe I'm making a card game and I have this XML file that I use to
print all the cards and maybe do the online game and everything.
I've defined the markup language for punkemon cards.
There's the punkeverse contains punkeland where they live, and that
contains a bunch of punkemons.

Now all these give information that is needed to make the menu for
that. It's an application specific markup style, but it has
information for menus in it. Basically all this gets translated
into all this very automatically by an XSL stylesheet.

That's a macro language for XML that takes the nice clean to the point
punkemon xml file and then transforms it into a piemenu tree and a web
page that pops that pie menu up.

punkemon.xml:

https://donhopkins.com/home/PieMenu/punkemon.xml.txt

<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="punkemon.xsl" ?>

<punkeverse>

<punkeland
name="Rave Caves"
itemradius="60"
pieradius="100">

<punkemon
name="Candibi"
foundin="Rave Caves"
attacks="Disturbing Cuteness, Pacifier attack"
likes="Candy, Stuffed Animals, Loops"
dislikes="Ambient music, spankings, bed-time"
creator=""
url="http://www.gothic.net/~luvcraft/punkemon/rave/candibi.html"
image="Punkemon/candibi.gif">
<description>
The youngest and perkiest denizens of the Rave Caves, Candibis
spend much of their time spinning around in circles with one
hand high in the air and the other hand tightly clutching a
large stuffed animal. Naturally shy, these cuddly creatures
can often be enticed into a Punkeball with large amounts of
candy, especially if the candy comes in perforated sheets."
</description>
</punkemon> [...]

The header of the punkemon.xml file says "hey this is my stylesheet, if you
want to display me, run me through this style sheet!"
And what that style sheet does is expand to a web page with a title
that says what it is.

punkemon.xsl:

https://donhopkins.com/home/PieMenu/punkemon.xsl.txt

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">

<HTML>

<HEAD>
<TITLE>Punkemon Pie Menus</TITLE>
</HEAD>

<BODY>

<DIV ID="Barf"></DIV>

<DIV STYLE="width=100%;height=80%;behavior:url(piemenu.htc)"
onchange="ChangePunkemon(event)">

<CENTER>
<H1>Punkemon Pie Menus!</H1>
<IMG SRC="Punkemon/island.jpg"/>
</CENTER>

<XML>

<piemenu
id="root"
fixedradius="90"
centermargin="50"
centerbackground="white"
itemnormalbackground="white"
itemselectedbackground="gray">

<html>
Punkemon<BR/>
Pie Menus
</html>

<xsl:for-each select="*/punkeland"> [...]

And then, the nice part is, this
is how a web designer puts the pie menu on the page.
You make a div, which is like just a section.
And I'm giving it a width and height, and I give
it a behavior.

The behavior attaches this JavaScript code to it and
allows it to receive input events and translate them to a higher level
semantics and then send these output events like the pie menu changed,
and it's going to call my JavaScript function that's on this
web page to handle it.

Now this div is the thing that's presented on
the page that you click on, so it's got a little picture of the island
there. Inside the div besides its presentation is an XML data
island, which is just embedded XML that instead of being displayed on
the page is just data that can be referred to.

The pie menu looks in there, finds the XML, pulls out the pie menu
definition in it, and uses it. You can pack these things nicely together. You can also point to another file that contains the pie menus
externally. But in this case we're going to have them inline.

The Punkemon piemenu contains the words "Punkemon Pie Menus". And
then it uses the XSL macro language to loop over all of the
punkelands, making items for each one of them.
And that item is made by extracting fields from
that punkeland, and just sticking them into HTML as either properties
or content.

You can get the value of the name of this guy and
stick it into that guy, and put a bold marker around it, and make a div.
This is just a bunch of nested loops that loops over the
database and renders it out as dynamic HTML embedded in a piemenu tree
embedded in a web page.

And it works! That's what you're seeing over here.

There's a lot of other really neat applications of automatically
generating the piemenus or any other kind of user interface from an
XML specification, that could also be used for a lot of other things.
And you're just describing your data in one place, and then
algorithmically rendering it out to all sorts of other things.