Solucionado
O seguinte comando:
..."focoBt.addEventListener('click', () => {
html.setAttribute('data-contexto', 'foco')
})" ...
não deu o retorno de sua função como realizado no vídeo em virtude de ter colocado o "<script src="./script.js"> defer</script>" na tag "head", tive que mudar para a tag "body" para que meu código fosse lido e a função de mudança de cor de acordo com o click do botão fosse executada corretamente.
É normal disso ocorrer, ou devo ter feito algo de errado?
Oi, Italo, tudo bem?
O problema no carregamento do script, quando ele está adicionado na tag <head>, ocorre por conta do defer ter sido adicionado no corpo da tag <script>e não como uma propriedade da tag, fazendo com que o navegador não consiga ler essa propriedade e rode o script imediatamente, antes de carregar o restante do DOM, o que pode causar problemas se o script tentar acessar elementos que ainda não foram carregados.
Quando você move o script para o final da tag <body>, ele será carregado e executado somente após todo o conteúdo da página ter sido carregado, o que também garante que todos os elementos do DOM estejam disponíveis.
Aqui está um exemplo prático para ilustrar:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
<script src="./script.js" defer></script> <!-- Isso deve funcionar -->
</head>
<body>
<button id="focoBt">Clique aqui</button>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
</head>
<body>
<button id="focoBt">Clique aqui</button>
<script src="./script.js"></script> <!-- Isso também deve funcionar -->
</body>
</html>
Ambas as opções de código acima deve funcionar corretamente.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!