morphdom Better <head> element support

Morphing <head> element should have a different algorithm because we have a set of immutable elements such as: <style>, <script> and <link rel="stylesheet">. Changing these element's attributes or re-creating of these elements causes style flickering and script reloading which breaks any app.

My proposal would be:

Identify such nodes using its content and, additionally, src value for <script> and href value for <link rel="stylesheet">. We need this for handling attributes re-ordering and changing of those attributes which are irrelevant for script or style reloading.
Accumulate <script>, <style> and <link rel="stylesheet"> nodes inside <head> element if morphing to a new state requires to remove them.

For example,

We have a head element:

<head>
    <title>First title</title>
    <style type="text/css">some styles1</style>
    <script type="application/javascript">some scripts1</script>
    <script type="application/javascript" src="someScriptSrc1"></script>
    <link rel="stylesheet" href="someStyleLink1">
    <link rel="author" href="Author">
    <meta name="name1" content="value1">
</head>

New state is:

<head>
    <title>Second title</title>
    <style type="text/css">some styles2</style>
    <script type="application/javascript">some scripts2</script>
    <script type="application/javascript" src="someScriptSrc2"></script>
    <link rel="stylesheet" href="someStyleLink2">
    <link rel="author" href="New Author">
    <meta name="name1" content="value2">
</head>

After morphing we have:

<head>
    <title>Second title</title>
    <style type="text/css">some styles1</style>
    <style type="text/css">some styles2</style>
    <script type="application/javascript">some scripts1</script>
    <script type="application/javascript">some scripts2</script>
    <script type="application/javascript" src="someScriptSrc1"></script>
    <script type="application/javascript" src="someScriptSrc2"></script>
    <link rel="stylesheet" href="someStyleLink1">
    <link rel="stylesheet" href="someStyleLink2">
    <link rel="author" href="New Author">
    <meta name="name1" content="value2">
</head>

As far as I use morphdom inside Catberry.js, I have to implement a separate algorithm for solving this problem, you can see it here. But I believe you would come up with a better solution using morphdom approach.

Mar 20 '16 17:03 rdner

I believe this is the same concern as https://github.com/patrick-steele-idem/morphdom/issues/39

Jul 02 '16 12:07 AutoSponge

To pass browser validation (and our conversion to HTML using fragments), the morph needs to do something like this b/c the head can't exist alone.

morphdom(
  fromNode,
  "<document><head></head></document>"
)

Although I'm not sure of an exact solution. Leaving open for now. 👍

Sep 21 '19 06:09 snewcomer