Атрибут checked тега <menuitem> — пункт меню позначено

<div contextmenu = "testmenu">
Клікни по мені правою кнопкою мишки 
<menu type = "context" id = "testmenu"> 
<menuitem label = "like" type="checkbox" checked></menuitem> 
<menuitem label = "dislike" type="checkbox"></menuitem></menu>
		</div>

HTML

<div class="cols">
    <div class="card dead">
        <h4>Як радили писати</h4>
        <p contextmenu="cm">Клацніть тут правою кнопкою — власного меню не буде.</p>
        <menu type="context" id="cm">
            <menuitem id="mi1" label="Показувати сітку" type="checkbox" checked>Показувати сітку</menuitem>
            <menuitem id="mi2" label="Показувати лінійку" type="checkbox">Показувати лінійку</menuitem>
        </menu>
        <p class="note">Пункти меню видно прямо в тексті: для переглядача це
            невідомі рядкові елементи, а не меню.</p>
    </div>

    <div class="card live">
        <h4>Як це робиться сьогодні</h4>
        <p><label><input id="cb1" type="checkbox" checked> Показувати сітку</label></p>
        <p><label><input id="cb2" type="checkbox"> Показувати лінійку</label></p>
        <p class="note">Атрибут <code>checked</code> тут справді працює:
            перший прапорець позначено при завантаженні.</p>
    </div>
</div>

<table id="report">
    <thead><tr><th>елемент</th><th>клас у DOM</th><th>властивість checked</th><th>висновок</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.card {
    flex: 1 1 280px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.card.dead {
    border-color: #d64545;
    background: #fdeeee;
}

.card.live {
    border-color: #3a9a4f;
    background: #edf9ef;
}

.card h4 {
    margin: 14px 0 10px;
}

menu {
    margin: 8px 0;
    padding: 0 0 0 18px;
}

table {
    margin-top: 16px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 5px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
    vertical-align: top;
}

th {
    background: #eef4ff;
}

.note {
    color: #5a6472;
    font-size: .85em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

const RYADKY = [
    ['menuitem з checked', 'mi1', 'теґа не існує — атрибут нічого не позначає'],
    ['menuitem без checked', 'mi2', 'те саме'],
    ['input type=checkbox checked', 'cb1', 'працює: прапорець позначено при завантаженні'],
    ['input type=checkbox', 'cb2', 'працює: прапорець порожній'],
];

const tbody = document.querySelector('#report tbody');

for (const [nazva, id, vysnovok] of RYADKY) {
    const el = document.getElementById(id);
    const row = tbody.insertRow();
    row.insertCell().textContent = nazva;
    row.insertCell().textContent = el.constructor.name;
    row.insertCell().textContent = el.checked === undefined ? 'немає взагалі' : String(el.checked);
    row.insertCell().textContent = vysnovok;

    console.log(nazva, '->', el.constructor.name, '| checked =', el.checked);
}
// → menuitem з checked -> HTMLUnknownElement | checked = undefined
// → input type=checkbox checked -> HTMLInputElement | checked = true

console.log('атрибут у розмітці все ж записаний:',
    JSON.stringify(document.getElementById('mi1').getAttribute('checked'))); // → ""
console.log('контекстні меню сторінки підтримуються?', 'contextMenu' in document.body); // → false
console.log('<menu type="context"> малюється як', getComputedStyle(document.getElementById('cm')).display,
    '— тобто як звичайний блок'); // → block

// єдине, що лишилося від ідеї власного меню, — перехоплення події
document.querySelector('.dead p').addEventListener('contextmenu', (e) => {
    console.log('подія contextmenu спрацювала — але меню довелося б малювати самому');
});