本地正常的基础JavaScript代码为何在CodePen中失效？

本地运行正常的JavaScript切换背景色代码，在CodePen平台中按钮hover状态失效，且JS代码完全不执行，请问原因是什么？

对应的完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

        :root {
            --bg-color: #F5F5F5;
            --text-color: #000;
            --bg-hover: green;
            --text-hover: white;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box
        }

        body {
            transition: background-color 2s;
            background: var(--bg-color);
            color: var(--text-color);
            font-family: 'Inter', sans-serif;
        }

        #container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .title {
            font-weight: 400;
            font-size: 1.5rem;
        }

        .sstitle {
            font-weight: 300;
            font-size: 0.825rem;
            letter-spacing: .5rem;
        }

        .btn {
            border: none;
            padding: 0.5rem 1rem;
            margin-top: 1rem;
            background: var(--text-color);
            color: var(--bg-color);
        }

        .btn:hover {
            background: var(--bg-hover);
            color: var(--text-hover);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="container">
        <p class="title">Hello World</p>
        <p class="sstitle">Welcome</p>
        <button class="btn" id="btn">Changing Color</button>
    </div>
    <script>
        let state = 0;
        let btn = document.getElementById("btn");
        btn.addEventListener("click", toogleLight)
        function toogleLight() {
            if(state===0){
                document.documentElement.style.setProperty("--bg-color","black");
                document.documentElement.style.setProperty("--text-color","#F5F5F5");
                state = 1;
            } else{
                document.documentElement.style.setProperty("--bg-color","#F5F5F5");
                document.documentElement.style.setProperty("--text-color","black");
                state = 0;
            }
        }
    </script>
</body>
</html>

核心问题是CodePen的代码结构规则和本地环境不同：

• 本地环境中，浏览器会直接解析完整的HTML文档（包含<html>、<head>、<body>标签），但CodePen会自动为你生成基础的HTML框架，它会把你输入的内容插入到默认的<body>内部。
• 你把完整的HTML文档直接粘贴到CodePen的HTML编辑器里，导致页面出现了嵌套的<html>、<head>、<body>标签，浏览器解析时产生混乱：
  • CSS部分：嵌套的<style>标签被浏览器错误解析，.btn:hover的样式无法生效；
  • JS部分：嵌套的<script>标签作用域异常，甚至可能因为元素嵌套结构导致按钮获取失败，点击事件无法绑定，最终JS代码完全不执行。

把代码拆分到CodePen对应的三个编辑器中：

1. HTML编辑器：仅保留<body>内部的内容：

<div id="container">
    <p class="title">Hello World</p>
    <p class="sstitle">Welcome</p>
    <button class="btn" id="btn">Changing Color</button>
</div>

2. CSS编辑器：仅保留<style>标签内的所有样式代码：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --bg-color: #F5F5F5;
    --text-color: #000;
    --bg-hover: green;
    --text-hover: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    transition: background-color 2s;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
}

#container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.title {
    font-weight: 400;
    font-size: 1.5rem;
}

.sstitle {
    font-weight: 300;
    font-size: 0.825rem;
    letter-spacing: .5rem;
}

.btn {
    border: none;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    background: var(--text-color);
    color: var(--bg-color);
}

.btn:hover {
    background: var(--bg-hover);
    color: var(--text-hover);
    cursor: pointer;
}

3. JS编辑器：仅保留<script>标签内的代码：

let state = 0;
let btn = document.getElementById("btn");
btn.addEventListener("click", toogleLight)
function toogleLight() {
    if(state===0){
        document.documentElement.style.setProperty("--bg-color","black");
        document.documentElement.style.setProperty("--text-color","#F5F5F5");
        state = 1;
    } else{
        document.documentElement.style.setProperty("--bg-color","#F5F5F5");
        document.documentElement.style.setProperty("--text-color","black");
        state = 0;
    }
}

内容的提问来源于stack exchange，提问作者Jérôme Mercier