Programim dhe zhvillim, javascript, python, php, html

Ndani stilin midis komponentëve të uebit të të njëjtit lloj

Nëse e kuptoj saktë, krijimi i një shembulli të një komponenti ueb mund të përmblidhet si krijimi i një rrënjë hije dhe kopjimi i shënimit, p.sh. nga një shabllon në të:

var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);

Sigurisht, nëse shablloni përmban rregulla css në një etiketë stili, ato do të kopjohen gjithashtu. Kështu mund të kemi stile me shtrirje që i përkasin shënimit të brendshëm të një komponenti ueb.

Pyetje:

  1. A ka ndonjë implikim të performancës kur krijoj shumë raste të të njëjtit komponent në internet, pasi stili thjesht kopjohet dhe nuk ripërdoret?
  2. A ka ndonjë mënyrë për të ndarë nyjen e stilit nëpër instanca të shumta të të njëjtit komponent në ueb?
html web-component shadow-dom html5-template html-imports
07.03.2017

Përgjigjet:


1

A ka ndonjë implikim të performancës...?

Po, varet nga sa instanca dhe nga motori CSS i implementuar në shfletues. Ju do të duhet të provoni çdo rast përdorimi dhe të merrni parasysh shpejtësinë kundrejt konsumit të memories.

A ka ndonjë mënyrë për të ndarë nyjen e stilit nëpër instanca të shumta të të njëjtit komponent ueb?

Po, mund të përdorni @import url si në këtë pyetje SO. Ose mund të zgjidhni të mos përdorni Shadow DOM dhe të përdorni vetëm stilin global CSS.

Përditësim 2019

Siç sugjeroi Harshal Patil, që nga Chrome 73 dhe Opera 60 është e mundur që shumë Shadow DOM të miratojnë të njëjtën fletë stili. Në këtë mënyrë një përditësim në fletën e stilit do të zbatohet për të gjithë komponentët e uebit.

let css = new CSSStyleSheet
css.replaceSync( `div { color: red }` )

customElements.define( 'web-comp', class extends HTMLElement {
    constructor() {
        super()
        let shadow = this.attachShadow( { mode: 'open' } )
        shadow.innerHTML = `<div><slot></slot></div>`
        shadow.adoptedStyleSheets = [ css ]
    }
} )
color.oninput = () => css.replaceSync( `div { color: ${color.value} }` )
<web-comp>Hello</web-comp>
<web-comp>World</web-comp>
<input value=red id=color>

07.03.2017
  • A nuk është ende i dublikuar në markup, vetëm me ndryshimin, se është i ngarkuar nga një url e jashtme (me rezultatin e ruajtur në memorie, sigurisht)? 07.03.2017
  • Po dhe jo, shënimi nuk është dublikuar, por një objekt stylesheet i shtohet DOM-it të elementit. Gjithsesi, çdo element në DOM stilohet individualisht, kështu që sa më shumë elementë (dhe stile), aq më i gjatë do të jetë procesi i stilimit, pavarësisht nëse stili është i ndarë apo jo. Nuk e di vlerën e përgjithshme të fletës së stilit të përsëritur, por ndoshta nuk është aq shumë. Dhe duhet të ndryshojë me rastin e përdorimit (dhe me zbatimin e motorit css) 07.03.2017
  • @MichaelK faleminderit për përgjigjen e pranuar. Mund të votoni pro nëse ju ka ndihmuar :-) 01.02.2019
  • e rëndësishme Kodi i mësipërm ka nevojë për Chrome 73. E cila është planifikuar për publikim zyrtar më 12 mars 2019, kështu që ju duhet ta hapni këtë shembull në Chrome Canary 'për Zhvilluesit' tani (është shkurt 23 në kohën e shkrimit) 23.02.2019
  • @Supersharp, mund të sugjeroj ndryshimin e onchange në oninput në shembullin e kodit, jep reagime më të menjëhershme për emrat e ngjyrave HTML 23.02.2019
  • Ekzekutimi i fragmentit tuaj në Firefox-in më të fundit më jep "message": "TypeError: Illegal constructor.", 30.07.2019
    • Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..