I percorsi nei componenti Web sono relativi alla radice

Question

Sto creando un componente Web utilizzando l'implementazione nativa, che nel suo modello html ha collegamenti alle immagini. Tuttavia, questi collegamenti funzionano solo se sono assoluti, o relativi al documento principale, il che significa che quel componente non è riutilizzabile o portabile. Inoltre, è molto controintuitivo.

Attualmente, aggiungo un attributo data-url_prefix a tutti gli elementi che devono utilizzare le immagini. Quindi, quando creo una radice shadow per il mio elemento personalizzato, sostituisco un {{URL_PREFIX}} con il valore di tale argomento.

La mia soluzione sembra molto male. Sarei molto felice se tu consigli qualcosa di meglio, grazie.

---

ho trovato una citazione interessante sulla pagina http://webcomponents.org/polyfills/html-imports/:

POLYFILL NOTE

In documenti importati, href e src attributi in HTML, e l'URL immobili a file CSS, sono relative alla posizione del documento importato , non al documento principale.

perché un polifill usa una logica diversa dall'implementazione nativa?

---

Web Components Idealmente dovrebbe incapsulare tutte le loro dipendenze, ma se un componente web richiede un'immagine, dovrebbe conoscere l'URL assoluto a quella immagine, che non permette il componente da semplicemente spostato nella struttura del file.

Diciamo, per esempio ho la seguente struttura:

• index.html
• css
  • main.css
• js
  • main.js
• web_components
  • cool_web_component
    • cool_web_component.html
    • icon.png

se cambio al seguente:

• index.html
• css
  • principale.css
• js
  • main.js
• cool_web_component
  • cool_web_component.html
  • icon.png

Mi sarebbe richiesto di cambiare il puntatore a icon.png da qualche parte in quei file La mia domanda è come evitarlo o risolverlo in modo elegante. Inoltre, perché l'effettiva implementazione nativa è in conflitto con i polyfill?

Answer 1

Le specifiche del webcomponent definiscono che gli URL sono sempre relativi al documento principale. Questo, naturalmente, interrompe l'incapsulamento dei componenti web, come giustamente concluso. In altre parole, le specifiche sono buggy e molte persone si lamentano di ciò. Ecco perché il polyfill non segue le specifiche: sta risolvendo il problema.

Le specifiche cambieranno. Tuttavia, poiché questo non è banale da risolvere, potrebbe comunque richiedere del tempo. Si prega di consultare questi link:

• https://lists.w3.org/Archives/Public/public-webapps/2014OctDec/0013.html

• https://www.w3.org/Bugs/Public/show_bug.cgi?id=20976#c8

Per il momento, la soluzione è per il componente per cambiare l'URL delle sue immagini di modello, da relativo ad assoluto. È possibile ottenere la templateBaseUrl come segue:

(function (window, document) 
    { 
    var proto = Object.create(HTMLElement.prototype); 

    var template = document.currentScript.ownerDocument.querySelector("template"); 
    var templateBaseUrl = template.baseURI; 

    proto.createdCallback = function() 
     { 
     // Now find all images inside the template and change their src attribute, 
     // using templateBaseUrl. Also you must change CSS background-image: url(...); 
     ... 
     }; 

    document.registerElement('test-element', {prototype: proto}); 
    })(window, document); 

Un altro modo di fissare questo, in caso di piccole immagini come icone, è quello di incorporare i dati di immagine direttamente nel documento, con URI dati. Questo salva anche richieste HTTP (finché non abbiamo Http/2).Ad esempio:

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" /> 

Answer 2

Questo comportamento sembra essere specifico per le immagini.
Per i tag di script e di collegamento, i percorsi relativi dal documento importato funzionano come previsto.

Inoltre ho notato che questo non è qualcosa di specifico per il polyfill, anche per l'implementazione nativa (chrome) questo problema (?) Sembra essere lì.

Sembra che solo l'opzione qui sia includere uno script nel codice HTML importato, che convertirà questi percorsi relativi nelle loro controparti assolute.
Per risolverlo in modo elegante puoi evitare gli url di hardcoding nel tuo script e generarlo usando l'url del tuo documento di importazione. È possibile ottenere quello da document.currentScript.ownerDocument (o document._currentScript.ownerDocument nello scenario polyfilled).

Quindi, per rispondere alla seconda domanda, non vedo alcuna differenza nell'implementazione nativa e polifissa, almeno in termini di comportamento degli attributi src e href.
La citazione menzionata da http://webcomponents.org/polyfills/html-imports/ sembra essere specifica di href/src di script e tag di collegamento e funzionano come scritti.

Spero che aiuti.