I can give you a couple of examples. One is my main menu and the other is for the skill tree you see above. I'll try to explain the menu as it's a LOT simpler. The skill tree gets pretty complex. Here goes. Let me know if I don't make sense here.
The first thing you have to realize is that HTMLElement is designed to work with chunks of HTML and not full web pages. It doesn't surprise me that an iframe in the middle of it produced unexpected results. It doesn't expect to see <head><body><script> tags and the like. It's kinda an iframe all to itself but it doesn't need all the trappings of a full web page.
Here's the codepen for my main menu. One thing to consider is this HTML is static. I put it in the element's text and don't change it. It changes itself.
codepen.io/Fengist/pen/LoWwGq
On the left in the HTML block you'll see two chunks of HTML. The first thing to realize is that the second isn't displayed and it is the HTML I actually have in my HTMLElement. The first chunk is what the HTML looks like after I'm done with it inside C3. I put it there so you can see how it actually looks and can play with it.
In the second chunk you'll see odd things like {{Menu1}} and {{Menu2}}. These represent instance variables on the HTMLELement. I created instance variables that exactly match what's in those brackets, i.e. Menu1, Menu2, etc. and I left them as empty strings.
On the start of the first layout where the menu is visible I call a function called ClearMenu like this:
-> Functions: Call ClearMenu (selectedMenu: 1)
The function looks like this:
* On function 'ClearMenu'
* Parameter 'selectedMenu' (Number)
-> HTMLElement: Set Menu1 to ""
-> HTMLElement: Set Menu2 to ""
----+ System: selectedMenu = 1
-----> HTMLElement: Set Menu1 to "><a class=""active"""
-----> HTMLElement: Set Menu2 to " el-on:onclick=""menuFunction(2);""><a "
----+ System: selectedMenu = 2
-----> HTMLElement: Set Menu2 to "><a class='active'"
-----> HTMLElement: Set Menu1 to " el-on:onclick=""menuFunction(1);""><a "
In this example I'm only working with Menu1 and Menu2 to make it brief. What this function does is first sets all of the instance variables to an empty string. This resets the HTML back to it's original state with the {{Menu1}},{{Menu2}}... etc. Then, depending on the value of the parameter passed (1 in this case.) It sets the instance variable to:
><a class=""active
It sets all of the other instance variables to:
el-on:onclick=""menuFunction(2);""><a
With the 2 being the parameter I'm passing to menuFunction. Others would be 3, 4, etc. You can see that in the codepen.
When HTMLElement looks at the text, it replaces {{Menu1}} with whatever the value of instance variable Menu1 is.
So, the HTML for Menu1 changes from this:
<li {{Menu1}}>Dashboard</a></li>
to this:
<li><a class="active">Dashboard</a></li>
And all I did was change the instance variables.
What this does, and you can see this in the codepen, is adds in the class="active" tag. In my CSS I have that so that the background changes color to indicate that it's the one selected.
The other lines get changed from (for example) this:
<li {{Menu2}}>Skills</a></li>
to this:
<li el-on:onclick="menuFunction(2);"><a>Skills</a></li>
That el-on:onclick is a special code used by HTMLElement to perform an on-click event. In this case, when you click on that list item, it will call a function in Construct. Here, it calls menuFunction and passes 2 as the parameter. That function looks like this:
* On function 'menuFunction'
* Parameter 'MenuRequested' (Number)
----+ System: MenuRequested = 1
-----> System: Go to Layout 1
----+ System: MenuRequested = 2
-----> System: Go to Skills Layout
(shortened for brevity)
When that function is called, it simply tells Construct to open a specific layout. In this case, the parameter is 2 so it opens the Skills Layout.
In the On Start of Layout for the Skills Layout I call this again:
-> Functions: Call ClearMenu (selectedMenu: 2)
Which resets the instance variables back to empty strings, replaces {{Menu2}} with the 'active' tag and all of the others get replaced with the el-on:onclick tag.
When this all comes together, it creates an HTML menu system inside Construct. When a user clicks on a list item, it opens a different layout, highlights the selected menu item, disables it from being clicked on (you don't want them loading the same layout over and over again) and resets the others so that they can be clicked on.
I hope that explains it.
The skill tree is much more complex. You can find it here:
codepen.io/Fengist/pen/oOjgBw
The huge difference between the two is that the skill tree HTML is built by a PHP script and sent to the client as a JSON. The HTML you see on the left is the output of that PHP script. Each of those list items is built from several MySQL tables. Because users can 'train' skills, this has to be a dynamic list as things like skill in training and the users level in a skill have to be timely. Using the el-on:onclick code along with some creative HTML, users can click on a 'learn' button inside the HTML and it calls a function that fires off an AJAX to update the database to record which skill the user is learning. It then, updates the HTML and sends it back to the client. If you'll notice, one of those progress bars is 'pulsing' to indicate which skill is currently in training. It also fires other functions to highlight specific list items to indicate which is selected. For that, rather than 80 odd instance variables like in the menu, I do a simple string 'replace' to set one class to the 'active'. And it does other things. If a list item is clicked, it fires off an AJAX call that returns a description of the skill, the time it will take to train and training prerequisites and loads that HTML response into yet another HTMLElement.
I've only been working with this plugin for a few weeks and there are still a lot of things I haven't experimented with, like all of the 'EVENT' settings at the bottom of the properties. I believe, the author originally put those in to do the things I'm already doing with the HTML el-on code. He added in that el-on after he had all those settings and it replaced many of those. But if you look, you can even set up events to change the HTML based on keyboard events, mouse events and even HTML form events (like you can call a function when a form submit button is clicked!).
The beauty of this plugin is that you can include all of the power of HTML, CSS and JS onto a Construct form or, you can just have chunks. Rather than reloading entire web pages when a user clicks on an item (as you would with straight HTML), you just reload or change what's in the HTMLElement.
I know this is a tldr but you asked for it. Hope this helps.