Firefox：shadow-DOM 兼容性

Question

我有一些 JavaScript 在當前版本的 Chrome 上運行良好，但不適用於 Firefox。 Firefox 的懸停和單擊事件觸發器失敗，我認為這是一個影子 DOM 問題。

我可以用 JavaScript 懸停代碼替換 CSS，它適用於 Firefox（不適用於 Chrome），但這不會解決點擊事件的問題。

這里如何實現跨瀏覽器兼容性？

 let elementsArray = document.querySelectorAll(".icon"); elementsArray.forEach(function(elem) { console.log("getting element -"+String(elem)); elem.addEventListener("mouseenter", function() { elem.setAttribute("style", " filter: grayscale(100%);"); }); elem.addEventListener("mouseout", function() { elem.setAttribute("style", ""); }); elem.addEventListener("click", function() { let hex = this.getAttribute('id'); console.log(hex); }); });

 <svg width="600" height="100" > <g id="layer0" class="slide" > <path class="icon" id="y2011_0" d="M 285.0,45.0 300.0,70.98076211353316 285.0,96.96152422706632 255.0,96.96152422706632 240.0,70.98076211353316 255.0,45.0 z" fill="rgba(124,38,10,0.500000)"/> <path class="icon" id="y2011_1" d="M 330.0,19.019237886466843 345.0,45.0 330.0,70.98076211353316 300.0,70.98076211353316 285.0,45.0 300.0,19.019237886466843 z" fill="rgba(124,39,10,0.500000)"/> </g> <use id="use" xlink:href="#layer0" href="#layer0" /> </svg>

Answer 1

如果您動態創建 SVG ，則代碼更少，控制更多
帶有 W3C 標准Web 組件（所有現代瀏覽器都支持）

 <style> svg { background: pink } path { stroke: blue } </style> <game-board> <hexagon x="46" y="0" /> <hexagon x="138" y="0" /> <hexagon x="92" y="26" /> <hexagon x="138" y="52" /> <hexagon x="92" y="78" /> <hexagon x="184" y="26" /> </game-board> <script> customElements.define("game-board", class extends HTMLElement { connectedCallback() { setTimeout(() => { let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.innerHTML = `<style>` + `.hexagon{fill:red}.hexagon:hover{filter:grayscale(100%);cursor:pointer}` + `.hexclicked{fill:green}` + `</style>`; svg.append(...[...this.querySelectorAll("hexagon")].map(hex => { let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", `m${hex.attributes.x.value} ${hex.attributes.y.value} 15 26-15 26-30 0-15-26 15-26z`); path.classList.add("hexagon"); path.onclick = (evt) => path.classList.toggle("hexclicked"); return path; })); this.replaceWith(svg); }) } }) </script>

<hexagon>是一個未知元素； 保存使用，
見： https ://dev.to/dannyengelman/web-components-using-unknownhtmlelements-for-better-semantic-html-5d8c