Style makes this blue

<p id='style-inline-nonce'>Style makes this blue</p>
<style nonce="677bf5fe36bb05">
 #style-inline-nonce{color: rgb(0, 0, 255);}
 #style-inline-nonce:before{content: 'Changed ';}
</style>

Inline JavaScript w/o nonce will change this color to green

<p id="inline-js-1">
  Inline JavaScript w/o nonce will change this color to green
</p>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("inline-js-1").style.color="rgb(0, 128, 0)";
  window.executed['inline-js-1']=true;
});
</script>

Inline JavaScript w/ nonce will change this color to orange

<p id="inline-js-2">Inline JavaScript w/ nonce will change this color to orange</p>

<script nonce="677bf5fe36bb05">
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("inline-js-2").style.color="rgb(255, 165, 0)";
  window.executed['inline-js-2']=true;
});
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" />
<i class="fas fa-align-justify"></i>
Font awesome icon, remote style

Should be a fancy font if google fonts loaded

<p class="google-font">Should be a fancy font if google fonts loaded</p>

<div data-youtube id='iframe-remote-youtube-2'></div>
<script nonce='677bf5fe36bb05' src='https://www.youtube.com/iframe_api'></script>

window.onYouTubeIframeAPIReady = function() {
    Array.from(document.querySelectorAll('[data-youtube]')).map(function(el) {
        var id = el.getAttribute('id');
        new YT.Player(id, {
            height: '225',
            width: '400',
            videoId: 's4wrMMju-Xc'
        });
    })
}

<img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="From another domain" />

Will change once AJAX is done

<p id='ajax-local'>Will change once AJAX is done</p>

fetch('ajax.php')
    .then(function(response) {
        return response.json();
    })
    .then(function(d) {
        var el = document.querySelector('#ajax-local');
        el.textContent = d.msg;
    })
    .catch(function(err) {
        var el = document.querySelector('#ajax-local');
        if (!el) {return;}
        el.textContent = err;
    });

<embed src="static/smashing-the-stack.pdf" type="application/pdf" width="400" height="225">
</embed>

<embed src="static/jquery.svg" type="image/svg+xml" width="400" height="225">
</embed>